Anleitung zum Hervorheben der ersten Zeile eines Absatzes

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 des Textes stylen

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 es zwar stylen, allerdings wird der gestylte Text bei kleineren Anzeigen auf die nächste Zeile umgebrochen.

Verwenden eines Pseudoelements

Ein Pseudoelement kann anstelle des <span> verwendet werden; es ist jedoch flexibler — der genaue Inhalt, der von einem Pseudoelement ausgewählt wird, wird berechnet, nachdem der Browser den Inhalt gerendert hat. Es funktioniert also auch, wenn sich die Größe des Viewports ändert.

In diesem Fall müssen wir das ::first-line Pseudoelement verwenden. Es wählt die erste formatierte Zeile jedes Absatzes aus, was bedeutet, dass Sie sie nach Bedarf 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 Pseudoelemente verhalten sich auf diese Weise. Sie agieren so, 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 Pseudoelementen mit anderen Selektoren

Im obigen Beispiel wählt das Pseudoelement 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 Pseudoklasse. Damit können wir die erste Zeile des ersten Kindes von .wrapper auswä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 Pseudoelementen mit anderen Selektoren in einem komplexen oder zusammengesetzten Selektor müssen die Pseudoelemente nach allen anderen Komponenten im Selektor erscheinen, in dem sie auftauchen.

Siehe auch