Question

有两列，我放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>

Answer 1

第一个问题：

你的text-indent仅在左列上工作的原因是因为text-indent属性指定了文本块中第一行的缩进，并且因为你跨越两列的相同文本块，第一行是左列的开头。你能做的就是在跨度上添加一些填充代码..就像这样......

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

第二个问题：

.newspaper, span{}和.newspaper span{}之间的区别在于.newspaper, span{}内的样式应用于.newspaper类和所有 {{ 1}}使用逗号等于......

spans

...在你的样式表中。

如果没有逗号，您只需选择该类中的所有span{ text-indent:2em; }。

Answer 2

text-indent属性适用于块容器，如specs

中所述

此外，另一个特定于您的说明：

由于text-indent属性仅影响“第一个格式化的行”，因此强制中断后的行不会缩进。

<span>不被视为块级元素，请参阅此讨论here

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

Answer 3

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

和：

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

以上代码示例在缩进整个元素文本块（包括可能形成新行的溢出文本）的情况下起作用。

文本缩进不与HTML5内联

3 个答案: