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伪元素：字体属性，颜色属性，背景属性，'字间距'，'字母间距'，'文本装饰'，'vertical-align'，' text-transform'，'line-height'。 UA也可以应用其他属性。

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

Answer 2

以下属性可用于：第一行：

字体属性
颜色属性
背景属性
字间距
字母间距
文字修饰
垂直对齐
文本变换
行高
明确

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.

为什么text-align不能用于第一行伪元素？

3 个答案: