::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 Block-Containers an.
Probieren Sie es aus
Die Wirkung von ::first-line
ist begrenzt durch die Länge und den Inhalt der ersten Zeile des Textes innerhalb des Elements. 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 Kindelement im Element, welches der erste Teil der ersten Zeile wäre, ein Inline-Blockelement wie zum Beispiel eine Inline-Tabelle ist.
Hinweis: Selectors Level 3 führten die Doppelpunkt-Notation (::
) ein, um Pseudo-Elemente von den Einzelpunkt-Notationen (:
) der Pseudo-Klassen zu unterscheiden. Browser akzeptieren sowohl ::first-line
als auch :first-line
, welches in CSS2 eingeführt wurde.
Für die Zwecke von CSS-background
verhält sich das ::first-line
-Pseudo-Element wie ein Inline-Element. Das bedeutet, dass in einer linksbündigen ersten Zeile der Hintergrund möglicherweise nicht bis zum rechten Rand reicht.
Erlaubte 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
color
-Eigenschaft word-spacing
,letter-spacing
,text-decoration
,text-transform
, undline-height
text-shadow
,text-decoration
,text-decoration-color
,text-decoration-line
,text-decoration-style
, undvertical-align
.
Syntax
::first-line {
/* ... */
}
Beispiele
Die 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
::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-Text-Elements stylen
In diesem Beispiel wird die erste Zeile eines SVG-<text>
-Elements mit Hilfe des Pseudo-Elements ::first-line
gestylt.
Hinweis: Zum Zeitpunkt des Schreibens hat dieses Feature 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. Anschließend wählen wir die erste Zeile mit dem Pseudo-Element ::first-line
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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::first-line | ||||||||||||
Support on SVG <text> element |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
- Uses a non-standard name.
- Has more compatibility info.