Wie man die erste Zeile eines Absatzes hervorhebt

In diesem Leitfaden erfahren Sie, wie Sie die erste Zeile eines Textes in einem Absatz hervorheben können, selbst wenn Sie nicht wissen, wie lang diese Zeile sein wird.

Die erste Zeile eines Textes stylen

Sie möchten die erste Zeile eines Absatzes größer und fett darstellen. Wenn Sie ein <span> um die erste Zeile setzen, können Sie diese zwar stylen, aber wenn die erste Zeile aufgrund einer kleineren Bildschirmgröße kürzer wird, wird der gestylte Text auf die nächste Zeile umgebrochen.

Verwendung eines Pseudo-Elements

Ein Pseudo-Element kann das <span> ersetzen; es ist jedoch flexibler — der genaue Inhalt, den ein Pseudo-Element wählt, wird berechnet, sobald der Browser den Inhalt gerendert hat. Es funktioniert also auch, wenn sich die Größe des Ansichtsfensters ändert.

In diesem Fall müssen wir das ::first-line Pseudo-Element verwenden. Es wählt die erste formatierte Zeile jedes Absatzes aus, was bedeutet, dass Sie diese nach Ihren Wünschen stylen können.

html
<div class="wrapper">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</div>
css
.wrapper p::first-line {
  font-weight: bold;
  font-size: 130%;
}

Hinweis: Alle Pseudo-Elemente funktionieren auf diese Weise. Sie verhalten sich so, als hätten Sie ein Element in das Dokument eingefügt, tun dies jedoch dynamisch basierend auf dem Inhalt, während er zur Laufzeit angezeigt wird.

Kombinieren von Pseudo-Elementen mit anderen Selektoren

Im obigen Beispiel wählt das Pseudo-Element die erste Zeile jedes Absatzes aus. Um nur die erste Zeile des ersten Absatzes auszuwählen, können Sie es mit einem anderen Selektor kombinieren. In diesem Fall verwenden wir die :first-child Pseudo-Klasse. Dies ermöglicht es uns, die erste Zeile des ersten Kindes von .wrapper auszuwählen, wenn dieses erste Kind ein Absatz ist.

html
<div class="wrapper">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</div>
css
.wrapper p:first-child::first-line {
  font-weight: bold;
  font-size: 130%;
}

Hinweis: Beim Kombinieren von Pseudo-Elementen mit anderen Selektoren in einem komplexen oder zusammengesetzten Selektor müssen die Pseudo-Elemente nach allen anderen Komponenten im Selektor erscheinen, in dem sie vorkommen.

Siehe auch