LabEx
LoginBeitreten

Mehrzeiligen Text kürzen

Beginner

This tutorial is from open-source community. Access the source code

Einführung

In diesem Lab werden wir die Verwendung von CSS zur Kürzung mehrzeiliger Texte auf eine bestimmte Anzahl von Zeilen untersuchen. Mit der -webkit-line-clamp-Eigenschaft und anderen verwandten CSS-Eigenschaften können wir effektiv die Anzahl der angezeigten Zeilen in einem Textblock begrenzen, was ihn visuell ansprechender und leichter lesbar macht. Durch dieses Lab lernen Sie, wie Sie diese Technik in Ihren Webdesignprojekten implementieren.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Mehrzeiligen Text kürzen

Sie können den Code in index.html und style.css schreiben..

Mehrzeiligen Text auf eine gegebene Anzahl von Zeilen begrenzen.

  • Verwenden Sie -webkit-line-clamp, um die maximale Anzahl der anzuzeigenden Zeilen festzulegen.
  • Setzen Sie display auf -webkit-box und -webkit-box-orient auf vertikal, da diese erforderlich sind, damit -webkit-line-clamp angewendet werden kann.
  • Wenden Sie overflow: hidden an, um alles, was nach dem Kürzen des Texts überläuft, zu verstecken.
<p class="excerpt">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod enim
  eget ultricies sollicitudin. Nunc aliquam arcu arcu, non suscipit metus luctus
  id. Aliquam sodales turpis ipsum, in vehicula dui tempor sit amet. Nullam quis
  urna erat. Pellentesque mattis dolor purus. Aliquam nisl urna, tempor a
  euismod a, placerat in mauris. Phasellus neque quam, dapibus quis nunc at,
  feugiat suscipit tortor. Duis vel posuere dolor. Phasellus risus erat,
  lobortis et mi vel, viverra faucibus lectus. Etiam ut posuere sapien. Nulla
  ultrices dui turpis, interdum consectetur urna tempus at.
</p>

.excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Mehrzeiligen Text kürzen" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.