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

Question

我想对齐某个段落，第一行应该左对齐，第二行右对齐。如果我用伪元素这样设置它就行不通了。

例子：

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

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

Answer 1

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

由于其性质，您无法更改第一行文本的对齐方式；它始终遵循其父块容器的文本对齐方式。你甚至不能改变它的显示方式，例如，你不能用display: none隐藏它，或者用display: inline-block把它变成一个内联块来尝试应用text-align属性。

此外，规范列出了certain restrictions to ::first-line，例如只有某些属性适用：

::first-line 伪元素类似于内联元素，但有一定的限制。以下 CSS 属性适用于 ::first-line 伪元素：字体属性、颜色属性、背景属性、'word-spacing'、'letter-spacing'、'text-decoration'、'vertical-align'、'text-变换'，'行高'。 UA 也可以应用其他属性。

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

Answer 2

以下属性可以与 :first-line 一起使用：

• 字体属性
• 颜色属性
• 背景属性
• 字间距
• 字母间距
• 文字装饰
• 垂直对齐
• 文本转换
• 行高
• 清除

Answer 3

The ::first-line selector is used to add a style to the first line of the specified selector.

 The following properties can be used with ::first-line: 

    font properties
    color properties 
    background properties
    word-spacing
    letter-spacing
    text-decoration
    vertical-align
    text-transform
    line-height
    clear

The ::first-line selector can only be used with block-level elements.