Anleitung zur Hervorhebung der ersten Zeile eines Absatzes

In diesem Leitfaden erfahren Sie, wie Sie die erste Zeile eines Absatzes 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. Ein <span> um die erste Zeile zu setzen, ermöglicht es Ihnen, diese zu stylen. Wenn jedoch die erste Zeile aufgrund einer kleineren Viewport-Größe kürzer wird, wird der gestylte Text auf die nächste Zeile umbrochen.

Verwendung eines Pseudo-Elements

Ein Pseudo-Element kann den Platz 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. Es funktioniert also auch dann, wenn sich die Viewport-Größe ändert.

In diesem Fall müssen wir das ::first-line Pseudo-Element verwenden. Es wählt die erste formatierte Zeile jedes Absatzes aus, sodass Sie es 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 verhalten sich auf diese Weise. Sie verhalten sich, als hätten Sie ein Element in das Dokument eingefügt, tun dies jedoch dynamisch basierend auf dem Inhalt, wie 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 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 erscheinen.

Siehe auch