::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.

Das ::first-line CSS Pseudo-Element wendet Stile auf die erste Zeile eines Block-Containers an.

Probieren Sie es aus

Die Wirkung von ::first-line ist begrenzt durch die Länge und den Inhalt der ersten Zeile des Textes innerhalb des Elements. Die Länge der ersten Zeile hängt von vielen Faktoren ab, darunter die Breite des Elements, die Breite des Dokuments und die Schriftgröße des Textes. ::first-line hat keine Wirkung, wenn das erste Kindelement im Element, welches der erste Teil der ersten Zeile wäre, ein Inline-Blockelement wie zum Beispiel eine Inline-Tabelle ist.

Hinweis: Selectors Level 3 führten die Doppelpunkt-Notation (::) ein, um Pseudo-Elemente von den Einzelpunkt-Notationen (:) der Pseudo-Klassen zu unterscheiden. Browser akzeptieren sowohl ::first-line als auch :first-line, welches in CSS2 eingeführt wurde.

Für die Zwecke von CSS-background verhält sich das ::first-line-Pseudo-Element wie ein Inline-Element. Das bedeutet, dass in einer linksbündigen ersten Zeile der Hintergrund möglicherweise nicht bis zum rechten Rand reicht.

Erlaubte Eigenschaften

Syntax

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

Beispiele

Die erste Zeile eines Absatzes stylen

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;
}

Ergebnis

Die erste Zeile eines SVG-Text-Elements stylen

In diesem Beispiel wird die erste Zeile eines SVG-<text>-Elements mit Hilfe des Pseudo-Elements ::first-line gestylt.

Hinweis: Zum Zeitpunkt des Schreibens hat dieses Feature begrenzte Unterstützung.

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

Um das SVG-<text>-Element so zu gestalten, dass es auf mehrere Zeilen umbricht, verwenden wir die white-space-CSS-Eigenschaft. Anschließend wählen wir die erste Zeile mit dem Pseudo-Element ::first-line aus.

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

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

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

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.

Siehe auch