::first-line

::first-line CSS 伪元素 将样式应用于 块级容器 的第一行。

试一试

::first-line 的效果受元素第一行文本的长度和内容限制。第一行的长度取决于许多因素，包括元素的宽度、文档的宽度和文本的字体大小。当元素的第一个子元素（将是第一行的第一部分）是内联块级元素（例如内联表格）时，::first-line 没有任何效果。

注意：选择器级别 3 引入了双冒号表示法 (::) 以区分 伪元素 和单冒号 (:) 伪类。浏览器接受 ::first-line 和 :first-line，后者在 CSS2 中引入。

出于 CSS background 的目的，::first-line 伪元素类似于内联级元素，这意味着在左对齐的第一行中，背景可能不会一直延伸到右边缘。

允许的属性

只有少量 CSS 属性可以与 ::first-line 伪元素一起使用。

语法

css
::first-line {
  /* ... */
}

示例

段落首行样式

HTML

html
<p>
  Styles will only be applied to the first line of this paragraph. After that,
  all text will be styled like normal. See what I mean?
</p>

<span>
  The first line of this text will not receive special styling because it is not
  a block-level element.
</span>

CSS

css
::first-line {
  color: blue;
  font-weight: bold;

  /* WARNING: DO NOT USE THESE */
  /* Many properties are invalid in ::first-line pseudo-elements */
  margin-left: 20px;
  text-indent: 20px;
}

结果

SVG 文本元素的首行样式

在本例中，我们使用 ::first-line 伪元素为 SVG <text> 元素的首行设置样式。

注意：在撰写本文时，此功能 支持有限。

HTML

html
<svg viewBox="0 0 320 150">
  <text y="20">Here is an English paragraph
that is broken into multiple lines
in the source code so that it can
be more easily read and edited
in a text editor.
  </text>
</svg>

CSS

为了使 SVG <text> 元素换行，我们使用 white-space CSS 属性。然后，我们使用 ::first-line 伪元素选择第一行。

css
text {
  white-space: break-spaces;
}

text::first-line {
  fill: blue;
  font-weight: bold;
}

结果

规范

规范
CSS 伪元素模块级别 4
# first-line-pseudo

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅