LabEx
LoginBeitreten

Text mit CSS-Overflow abbrechen

Beginner

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

Einführung

In diesem Lab werden wir uns in die Welt der CSS-Programmierung stürzen und lernen, wie man Text, der über die Breite einer Zeile hinausgeht, abbrechen kann. Durch die Kombination der Eigenschaften overflow, white-space und text-overflow werden wir in der Lage sein, am Ende des abgeschnittenen Texts einen Auslassungspunkt anzuzeigen. Durch dieses Lab werden wir ein tieferes Verständnis dafür gewinnen, wie man die Textanzeige auf Websites optimiert.

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.

Text abbrechen

In der VM wurden bereits index.html und style.css bereitgestellt.

Um Text, der länger als eine Zeile ist, abzuschneiden und am Ende einen Auslassungspunkt hinzuzufügen, verwenden Sie die folgenden CSS-Eigenschaften:

  • overflow: hidden, um zu verhindern, dass der Text außerhalb seiner Maße verläuft
  • white-space: nowrap, um zu verhindern, dass der Text in der Höhe mehr als eine Zeile überschreitet
  • text-overflow: ellipsis, um einen Auslassungspunkt hinzuzufügen, wenn der Text außerhalb seiner Maße verläuft
  • Geben Sie eine feste width für das Element an, um zu wissen, wann ein Auslassungspunkt angezeigt werden soll

Beachten Sie, dass diese Methode nur für einzelne Zeilen-Elemente funktioniert. Beispielsweise:

<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>

.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}

Klicken Sie bitte in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

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