::first-line CSS pseudo-element
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Das CSS-Pseudoelement ::first-line 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 Wirkung von ::first-line ist durch die Länge und den Inhalt der ersten Textzeile im Element begrenzt. 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 Kind des Elements, das den Anfang der ersten Zeile bilden würde, ein Inline-Element auf Blockebene ist, beispielsweise eine Inline-Tabelle.
Hinweis:
Selectors Level 3 führte die Schreibweise mit doppeltem Doppelpunkt (::) ein, um Pseudoelemente von Pseudoklassen mit einfachem Doppelpunkt (:) zu unterscheiden. Browser akzeptieren sowohl ::first-line als auch :first-line, das mit CSS2 eingeführt wurde.
Im Zusammenhang mit CSS background verhält sich das Pseudoelement ::first-line wie ein Element auf Inline-Ebene. Das bedeutet, dass der Hintergrund bei einer linksbündig ausgerichteten ersten Zeile möglicherweise nicht bis zum rechten Rand reicht.
Zulässige Eigenschaften
Nur eine kleine Teilmenge der CSS-Eigenschaften kann mit dem Pseudoelement ::first-line verwendet werden:
- Alle schriftbezogenen Eigenschaften:
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-stretchundfont-family - Alle hintergrundbezogenen Eigenschaften:
background-color,background-clip,background-image,background-origin,background-position,background-repeat,background-size,background-attachmentundbackground-blend-mode - Die Eigenschaft
color word-spacing,letter-spacing,text-decoration,text-transformundline-heighttext-shadow,text-decoration,text-decoration-color,text-decoration-line,text-decoration-styleundvertical-align.
Syntax
::first-line {
/* ... */
}
Beispiele
>Die erste Zeile eines Absatzes gestalten
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
::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-Textelements gestalten
In diesem Beispiel gestalten wir die erste Zeile eines SVG-Elements <text> mit dem Pseudoelement ::first-line.
Hinweis: Zum Zeitpunkt der Erstellung dieses Artikels wird diese Funktion nur eingeschränkt unterstützt.
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
Damit der Text im SVG-Element <text> auf mehrere Zeilen umgebrochen wird, verwenden wir die CSS-Eigenschaft white-space. Anschließend wählen wir die erste Zeile mit dem Pseudoelement ::first-line aus.
text {
white-space: break-spaces;
}
text::first-line {
fill: blue;
font-weight: bold;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Pseudo-Elements Module Level 4> # first-line-pseudo> |