这篇翻译不完整。请帮忙从英语翻译这篇文章

描述

 ::first-line 是将样式只应用于一个元素的首行。首行文本的数量取决于元素的宽,document的宽和文本的字号。和其他所有的 伪元素一样,::first-line 不能匹配任何真实存在的html元素。

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

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

  • 所有和字体有关的属性:font, font-kerning, font-style, font-variant, font-variant-numeric,font-variant-position,font-variant-east-asian,font-variant-caps,font-variant-alternates,font-variant-ligatures,font-synthesis,font-feature-settings,font-language-override, font-weight, font-size,font-size-adjust,font-stretch, and font-family
    the color property
  • 所有和背景有关的属性: background-color,background-clip, background-image,background-origin, background-position, background-repeat, background-size,  background-attachment, 和background-blend-mode
  •  word-spacing, letter-spacing, text-decoration, text-transform, and line-height
  •  text-shadow,text-decoration,text-decoration-color,text-decoration-line,text- decoration-style, vertical-align.

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

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

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

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

语法

css语法

Examples

text-transform

Change the letters of the first line of every paragraph to uppercase.

HTML Content

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

CSS Content

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

Output

margin-left

Does nothing, margin-left cannot be applied to a first-line pseudo-element.

HTML Content

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

CSS Content

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

Output

text-indent

Does nothing, text-indent cannot be applied to a first-line pseudo-element.

HTML Content

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

CSS Content

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

Output

Specifications

Specification Status Comment
CSS Pseudo-Elements Level 4
::first-line
Working Draft Defined more strictly where it can occur.
Generalized allowed properties to typesetting, text decoration and inline layout properties and opacity
Defined the inheritance of ::first-letter.
CSS Text Decoration Module Level 3
text-shadow with ::first-line
Candidate Recommendation Allowed the usage of text-shadow with ::first-letter.
Selectors Level 3
::first-line
Recommendation The definition of what is the first line of an element has been reworded. The two-colon syntax for pseudo-elements has been introduced.
CSS Level 2 (Revision 1)
::first-line
Recommendation No significant change, though CSS Level 2 still used the one-colon syntax.
CSS Level 1
::first-line
Recommendation The initial definition used the one-colon syntax.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (buggy when using text-transform: issue 129669) 1.0 (1.7 or earlier) 9.0 7.0 1.0 (85) (buggy when using text-transform: issue 3409)
Old one-colon syntax (:first-line) 1.0 (buggy when using text-transform: issue 129669) 1.0 (1.7 or earlier) 5.5 3.5 1.0 (85) (buggy when using text-transform: issue 3409)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 1.0 (1) 未实现 ? ?
Old one-colon syntax (:first-line) ? 1.0 (1) ? ? ?

See also

文档标签和贡献者

 此页面的贡献者: xiaojunjor, MinimalistYing, 876843240
 最后编辑者: xiaojunjor,