文章/答案/技术大牛

发布

社区首页 >问答首页 >文本缩进不能与HTML5内联工作

问文本缩进不能与HTML5内联工作
EN

Stack Overflow用户

提问于 2018-05-26 14:24:24

回答 3查看 2.5K关注 0票数 1

有两列，我放了text-indent，但它只影响左列，两列都在同一个类内，但只有左边是工作的，为什么？右列应该与左列相同，.newspaper、span{}和

.newspaper span{}？

 <!DOCTYPE html>
<html>
<head>
<style>
body{
   width:600px;
}
.newspaper {
   text-align: justify;
   -webkit-column-count: 2; /* Chrome, Safari, Opera */
   -moz-column-count: 2; /* Firefox */
   column-count: 2;
   font-family: "Times New Roman", Times, serif;
}
.newspaper,
span{
   text-indent: 2em;
}
</style>
</head>
<body>

<div class="newspaper">
   <span>yuyuy yuyuy yuyuy yuy</span> amet, consectetuer adipiscing elit. 
feeeeeeeeeeeeeeee
</br>
   <span>yuyuy yuyuy yuyuy yuy</span> amet, consectetuer adipiscing elit. 
feeeeeeeeeeeeeeee </div>

</body>
</html>

css

html

indentation

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-05-26 14:36:28

第一项问题：

文本缩进只在左列上工作的原因，是因为文本缩进属性指定文本块中第一行的缩进，而且由于跨越两个列上的相同文本块，第一行是左列的开始。你能做的就是把一些垫子加到跨度上。像这样..。

.newspaper span {
    padding-left: 2em;
}

第二个问题：

.newspaper, span{}和.newspaper span{}的区别在于，您在.newspaper, span{}中的样式被应用于.newspaper类和--所有具有逗号的 spans都等于有.

span{
   text-indent:2em;
}

...in您的样式表。

就像没有逗号一样，您只需选择该类中的所有spans。

票数 2

Stack Overflow用户

发布于 2018-05-26 14:51:09

text-indent属性用于块容器，如规格中所指出的

此外，还有一份专门针对你的说明：

由于文本缩进属性只影响“第一次格式化行”，强制中断后的行将不会缩进。

<span>不被认为是块级元素，请参见本讨论这里

默认情况下，块级元素的格式与内联元素不同.通常，块级元素从新行开始，内联元素则不开始.

票数 1

Stack Overflow用户

发布于 2019-08-26 05:31:44

span {
   text-indent: 2em;
   display: flex;
}

以及：

span {
   text-indent: 2em;
   display: inline-flex;
}

上述代码示例适用于缩进整个元素文本块(包括可能形成新行的溢出文本)。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50543730

复制

相似问题

问文本缩进不能与HTML5内联工作
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本缩进不能与HTML5内联工作EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本缩进不能与HTML5内联工作
EN