为什么 text-align 对第一行伪元素不起作用？

Question

我想对齐某些段落，第一行应向左对齐，但第二行应向右对齐。如果我用伪元素这样设置它，它就不起作用。

例子：

.title{
  text-align: right;
}
.title:first-line{
  text-align: left;
  font-weight: bold
}

第一行是粗体，但没有左对齐。有办法让它发挥作用吗？我正在 Chrome 上测试它。

Answer 1

第一行像内联伪元素一样渲染；因此，该text-align属性不能应用于它。

\n\n

由于其性质，您无法更改第一行文本的对齐方式；它始终遵循其父块容器的文本对齐方式。您甚至无法更改它的显示方式，例如，您无法使用 隐藏它display: none，或将其转换为内联块以display: inline-block尝试应用该text-align属性。

\n\n

此外，规范列出了对 的某些限制::first-line，例如仅适用某些属性：

\n\n

\n

伪::first-line元素类似于内联级元素，但有一定的限制。以下 CSS 属性适用于::first-line伪元素：字体属性、颜色属性、背景属性、\xe2\x80\x98word-spacing\xe2\x80\x99、\xe2\x80\x98letter-spacing\xe2\x80\x99、 \xe2\x80\x98 文本装饰\xe2\x80\x99、\xe2\x80\x98垂直对齐\xe2\x80\x99、\xe2\x80\x98文本变换\xe2\x80\x99、\xe2\x80\ x98行高\xe2\x80\x99。用户代理也可以应用其他属性。

\n

\n\n

如果您需要以不同方式对齐第一行，则必须将第一行的内容包装在另一个元素（例如 ）中<span>，然后将其设为<span>宽度为 100% 的内联块。只有这样你才能申请text-align: left并且它会起作用。当然，困难的部分是确定第一行到底是什么构成，除非您使用类似 a 的东西有一个固定断点，<br>在这种情况下，只需将第一行之前的所有内容都包装<br>在 a 中<span>。

\n