::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 ::first-line CSS Pseudoelement 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 Auswirkungen von ::first-line sind durch die Länge und den Inhalt der ersten Textzeile im Element eingeschränkt. Die Länge der ersten Zeile hängt von vielen Faktoren ab, einschließlich der Breite des Elements, der Dokumentbreite 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-Blockelement ist, wie z.B. eine Inline-Tabelle.
Hinweis:
Selectors Level 3 führte die Doppelpunkt-Notation (::) ein, um Pseudoelemente von den einpunkigen (:) Pseudoklassen zu unterscheiden. Browser akzeptieren sowohl ::first-line als auch :first-line, welches in CSS2 eingeführt wurde.
Für die Zwecke von CSS background ist das ::first-line-Pseudoelement wie ein Inline-Level-Element, was bedeutet, dass in einer linksbündigen ersten Zeile der Hintergrund möglicherweise nicht bis zum rechten Rand reicht.
Erlaubte Eigenschaften
Nur eine kleine Untermenge von CSS-Eigenschaften kann mit dem ::first-line-Pseudoelement 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-stretch, undfont-family - Alle hintergrundbezogenen Eigenschaften:
background-color,background-clip,background-image,background-origin,background-position,background-repeat,background-size,background-attachment, undbackground-blend-mode - Die
color-Eigenschaft word-spacing,letter-spacing,text-decoration,text-transform, undline-heighttext-shadow,text-decoration,text-decoration-color,text-decoration-line,text-decoration-style, undvertical-align.
Syntax
::first-line {
/* ... */
}
Beispiele
>Stilierung der ersten Zeile eines Absatzes
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
Stilierung der ersten Zeile eines SVG-Text-Elements
In diesem Beispiel stylen wir die erste Zeile eines SVG-<text>-Elements mit dem ::first-line-Pseudoelement.
Hinweis: Zum Zeitpunkt der Erstellung dieser Dokumentation hat diese Funktion begrenzte Unterstützung.
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. Dann wählen wir die erste Zeile mit dem ::first-line-Pseudoelement 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> |