文本缩进不适用于 HTML5

Question

有两列，我放了text-indent，但它只影响左边列，两列都在同一 class 内，但只有左侧有效，为什么？右边的列应该和左边的一样专栏，以及 .newspaper、span{} 和
之间的区别是什么 .newspaper 跨度{}?

 <!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

第一个问题：

您的文本缩进仅适用于左列的原因是因为文本缩进属性指定文本块中第一行的缩进，并且因为您跨越相同的文本分两列，第一行是左列的开始。你可以做的是在 span 中添加一些填充。像这样..

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

第二题：

.newspaper, span{} 和 .newspaper span{} 之间的区别在于 .newspaper, span{} 中的样式同时应用于 .newspaper class 和 ALL spans 有逗号等于有...

span{
   text-indent:2em;
}

...在您的样式表中。

如果没有逗号，您只需选择 class.

中的所有 spans

Answer 2

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

中所述

此外，还有一条特别针对您的说明：

Since the text-indent property only affects the “first formatted line”, a line after a forced break will not be indented.

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

By default, block-level elements are formatted differently than inline elements. Generally, block-level elements begin on new lines, inline elements do not.

Answer 3

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

和：

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

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

文本缩进不适用于 HTML5

text indenting not working inline with HTML5

html

css

indentation