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, auch wenn Sie nicht wissen, wie lang diese Zeile sein wird.

Die erste Zeile eines Textes gestalten

Sie möchten die erste Zeile eines Absatzes größer und fett darstellen. Wenn Sie ein <span> um die erste Zeile wickeln, können Sie sie zwar gestalten, aber wenn die erste Zeile aufgrund einer kleineren Ansichtsfenstergröße kürzer wird, wird der gestaltete Text auf die nächste Zeile übertragen.

Verwendung eines Pseudo-Elements

Ein Pseudo-Element kann die Stelle des <span> einnehmen; es ist jedoch flexibler — der genaue Inhalt, der von einem Pseudo-Element ausgewählt wird, wird berechnet, sobald der Browser den Inhalt gerendert hat, sodass es auch funktioniert, 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 sie nach Ihren Wünschen gestalten 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 verhalten sich auf diese Weise. Sie verhalten sich, als hätten Sie ein Element in das Dokument eingefügt, aber sie tun dies dynamisch basierend auf dem Inhalt, wie er zur Laufzeit angezeigt wird.

Pseudo-Elemente mit anderen Selektoren kombinieren

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: Bei der Kombination 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