::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 Juli 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
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 des Elements 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, welches der erste Teil der ersten Zeile wäre, ein Inline-Block-Element wie eine Inline-Tabelle ist.
Hinweis:
Selectors Level 3 hat die Doppelpunkt-Notation (::) eingeführt, um Pseudo-Elemente von den Einzelpunkt-Notation (:) Pseudoklassen zu unterscheiden. Browser akzeptieren sowohl ::first-line als auch :first-line, welches in CSS2 eingeführt wurde.
Im Hinblick auf die CSS background, ist das ::first-line Pseudo-Element wie ein Inline-Level-Element, was bedeutet, dass in einer linksbündigen ersten Zeile der Hintergrund möglicherweise nicht bis zum rechten Rand reicht.
Zulässige Eigenschaften
Nur eine kleine Teilmenge von CSS-Eigenschaften kann mit dem ::first-line Pseudo-Element verwendet werden:
- Alle Schrift-bezogenen 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 Hintergrund-bezogenen Eigenschaften:
background-color,background-clip,background-image,background-origin,background-position,background-repeat,background-size,background-attachment, undbackground-blend-mode - Die
colorEigenschaft 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
Gestaltung 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
Gestaltung 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 dieses Artikels hat dieses Feature eingeschränkte 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 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.
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
Loading…