CSS/Selektoren/Pseudoelement/first-line

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit dem Pseudoelement ::first-line wird die erste Zeile eines Textes angesprochen. Dieses Pseudoelement zeigt nur Wirkung bei Block- und blockähnlichen Elementen (inline-block, Listenpunkte, Tabellenüberschriften und -zellen).

  • CSS 1.0
  • IE
  • Firefox
  • Chrome
  • Safari
  • Opera
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Beispiel für das first-line-Pseudoelement</title> <style> p {width: 10em;} p::first-line {font-weight: bold;} </style> </head> <body> <h1>Das Pseudoelement <code>first-line</code></h1> <p>Dieser Absatz ist sehr lang, damit er die Wirkung des first-line-Pseudoelements demonstrieren kann.</p> </body> </html>
In diesem Beispiel wurde die Breite des Absatzelements stark begrenzt, so dass der Text mehrere Zeilenumbrüche enthält. first-line spricht jeden Text an, der vor dem ersten Zeilenumbruch steht. Die Worte „Dieser Absatz ist sehr“ plus/minus ein Wort werden daher in fett formatierter Schrift dargestellt.

Auf das first-line-Pseudoelement können Formatierungen des Schriftbildes und des Textes sowie Eigenschaften für Hintergründe angewendet werden. Die Anwendbarkeit anderer Eigenschaften liegt im Ermessen der Browserhersteller.

Der zu formatierende Text muss nicht direkt innerhalb des angesprochenen Elements notiert sein, er kann auch innerhalb eines verschachtelten Blockelements vorkommen. blockquote::first-line würde bei der Struktur „<blockquote><p>Text“ also ebenfalls den Text formatieren. Ausnahme bilden Nachfahrenelemente, die als inline-block dargestellt werden, diese werden nie vom first-line eines Vorfahren formatiert.

Textbestandteile der ersten Zeile, die aus dem Elementfluss herausgenommen wurden - beispielsweise durch float oder position - werden nicht formatiert.

Beachten Sie: Der Internet Explorer kennt bis Version 8 nur die Schreibweise mit einfachem Doppelpunkt („:first-line“).

Das Anwenden von Formatierungen auf Text in einem verschachtelten Element funktioniert bisher nur im Opera Browser und im Internet Explorer ab Version 8.

inline-block-Elemente, die von ::first-line formatierten Text umschließen, aber Nachfahre eines Elements sind, auf das entsprechende ::first-line-Formatierungen wirken, werden nach oben genannten Regeln nicht formatiert. Mit Ausnahme des Safari formatieren jedoch alle Browser den Inhalt des inline-block-Elements mit den in ::first-line gesetzen Eigenschaften und das auch dann, wenn sich der Text innerhalb des inline-block-Elements bricht.