MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

::first-line (:first-line)

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

描述

 ::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, andvertical-align.

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

In CSS 2, pseudo-elements were prefixed with a single colon character. As pseudo-classes were also following the same convention, they were indistinguishable. To solve this, CSS 2.1 changed the convention for pseudo-elements. Now a pseudo-element is prefixed with two colon characters, and a pseudo-class is still prefixed with a single colon.

As several browsers already implemented the CSS 2 version in a release version, all browsers supporting the two-colon syntax also support the old one-colon syntax.

If legacy browsers must be supported, :first-line is the only viable choice; if not, ::first-line is preferred.

语法

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

文档标签和贡献者

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