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

Probieren Sie es aus

p::first-line {
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: underline;
}

<p>
  In warm ocean waters around the world, you may see a strange sight: A fish
  leaping from the water and soaring dozens of meters before returning to the
  ocean's depths. Early Mediterranean sailors thought these flying fish returned
  to the shore at night to sleep, and therefore called this family of marine
  fish Exocoetidae.
</p>

Die Effekte von ::first-line werden durch die Länge und den Inhalt der ersten Zeile des Textes im Element begrenzt. Die Länge der ersten Zeile hängt von vielen Faktoren ab, einschließlich der Breite des Elements, der Breite des Dokuments und der Schriftgröße des Textes. ::first-line hat keine Wirkung, wenn das erste Kind des Elements, das der erste Teil der ersten Zeile wäre, ein Inline-Blocklevel-Element ist, wie z. B. eine Inline-Tabelle.

Hinweis: Selectors Level 3 führte die Doppelpunkt-Notation (::) ein, um Pseudo-Elemente von den Einfach-Pseudoklassen (:) zu unterscheiden. Browser akzeptieren sowohl ::first-line als auch :first-line, das in CSS2 eingeführt wurde.

Für die Zwecke von CSS background ist das ::first-line-Pseudo-Element wie ein Inline-Level-Element, was bedeutet, dass bei einer linksbündigen ersten Zeile der Hintergrund möglicherweise nicht ganz bis zum rechten Rand reicht.

Zugelassene Eigenschaften

Nur eine kleine Untergruppe von CSS-Eigenschaften kann mit dem ::first-line-Pseudo-Element verwendet werden:

Syntax

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

Beispiele

Stil der ersten Zeile eines Absatzes

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

Stil der ersten Zeile eines SVG-Text-Elements

In diesem Beispiel gestalten wir die erste Zeile eines SVG-<text>-Elements mit dem ::first-line-Pseudo-Element.

Hinweis: Zum Zeitpunkt der Erstellung hat dieses Feature eingeschränkte 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 auf mehrere Zeilen zu umbrechen, verwenden wir die white-space CSS-Eigenschaft. Wir wählen dann die erste Zeile mit dem ::first-line-Pseudo-Element 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

BCD tables only load in the browser

Siehe auch