Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
::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-lineCSSPseudoelement wendet Stile auf die erste Zeile einesBlock-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 Auswirkungen von::first-line sind 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 Auswirkung, 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 Doppelpunktschreibweise (::) ein, umPseudoelemente von den einfachen Doppelpunkten (:) derPseudoklassen zu unterscheiden. Browser akzeptieren sowohl::first-line als auch:first-line, welches in CSS2 eingeführt wurde.
Für die Zwecke von CSSbackground ist das::first-line Pseudoelement ähnlich einem Inline-Level-Element, was bedeutet, dass bei einer linksbündigen ersten Zeile der Hintergrund möglicherweise nicht bis ganz 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
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
Erste Zeile eines Absatzes stylen
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
* { font-size: 20px; font-family: sans-serif;}::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
Erste Zeile eines SVG-Text-Elements stylen
In diesem Beispiel stylen wir die erste Zeile eines SVG-<text>-Elements mit dem::first-line Pseudoelement.
Hinweis:Zum Zeitpunkt des Schreibens hat dieses Featureeingeschränkte Unterstützung.
HTML
<svg viewBox="0 0 320 150"> <text y="20">Here is an English paragraphthat is broken into multiple linesin the source code so that it canbe more easily read and editedin a text editor. </text></svg>CSS
Um das SVG<text> Element auf mehrere Zeilen umzubrechen, verwenden wir diewhite-space CSS-Eigenschaft. Wir wählen dann die erste Zeile mit dem::first-line Pseudoelement aus.
text { font-size: 20px; font-family: sans-serif;}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 |