::first-line (:first-line)

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

::first-line CSS pseudo-element (CSS 伪元素)在某 block-level element (块级元素)的第一行应用样式。第一行的长度取决于很多因素,包括元素宽度,文档宽度和文本的文字大小。

和其他所有的 伪元素一样,::first-line 不能匹配任何真实存在的 html 元素。

::first-line 伪元素只能在块容器中,所以,::first-line伪元素只能在一个 display 值为 block, inline-block, table-cell 或者 table-caption中有用.。在其他的类型中,::first-line 是不起作用的。

允许的属性值

在一个使用了 ::first-line 伪元素的选择器中,只有很小的一部分 css 属性能被使用:

这个列表将来可能会被扩展,但是推荐的是,你不要使用任何上述没有提到的属性。

备注: 在 CSS 2 中,伪元素是以 : 开头的。由于伪类也遵循同一规则,使得他们之间难以区分。为了解决这个问题,在 CSS 2.1 中,伪元素支持以 :: 开头。现在,使用伪元素时更推荐以 :: 开头,而使用伪类时使用 : 开头。

因为过去的浏览器都实现过 CSS 2 的规则,所以现在那些支持 :: 的浏览器通常同时也支持 : 的形式。

如果需要支持老旧的浏览器,那么 :first-line 是唯一的选择,反之,更推荐使用 ::first-line

语法

Error: could not find syntax for this item

示例

text-transform

将每个段落中的第一行字母转换成大写

HTML

html
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore.
</p>

CSS

css
p::first-line {
  text-transform: uppercase;
}

输出

margin-left

margin-left 在 first-line 伪元素上无效

HTML

html
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore.
</p>

CSS

css
p::first-line {
  margin-left: 20px;
}

输出

text-indent

text-indent 在 first-line 伪元素上无效

HTML

html
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore.
</p>

CSS

css
p::first-line {
  text-indent: 20px;
}

输出

规范

Specification
CSS Pseudo-Elements Module Level 4
# first-line-pseudo

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::first-line
Support on SVG <text> element

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

参见