Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Um robuste Layouts zu erstellen, kann es notwendig sein, Texte, unabhängig von ihrer Zeichenanzahl, auf eine bestimmte maximale Länge zu kürzen. Vor allem, wenn wir Layouts für Websites entwickeln, die via CMS von einem Redaktionsteam gepflegt werden, müssen wir uns darauf verlassen können, dass die Layouts möglichst unabhängig von ihren Inhalten ihre Symmetrie und Ästhetik bewahren. Dafür gibt es verschiedenste Herangehensweisen. Die wahrscheinlich einfachste ist mit CSS text-overflow und line-clamp.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Einzeiligen Text mit CSS text-overflow kürzen

Ausgangssituation: In der Breite beschränkter Container mit zu langem Text. Der Text bricht in eine zweite Zeile um.

Zunächst müssen wir verhindern, dass der Text in eine zweite Zeile umbricht. Das erreichen wir mit white-space: nowrap.

Mit der CSS-Angabe white-space: nowrap; wird verhindert, dass der Text umbricht.

Zweite Voraussetzung ist die Anweisung overflow: hidden, damit der Text nicht über seinen Container hinausläuft.

Mit der Anweisung overflow: hidden; wird überlaufender Text abgeschnitten.

Jetzt können wir text-overflow: ellipsis verwenden, um den Text nicht einfach nur am rechten Containerrand abzuschneiden, sondern eine Ellipse zu erzeugen.

CSS text-oberflow: ellispis;

Der vollständige CSS-Code sieht so aus:

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Auslassungszeichen

Standardmäßig werden ans Ende der Zeile die sogenannten Auslassungspunkte gesetzt. Diese bestehen aus einem einzelnen typografischen Zeichen, auch Dreipunkt genannt. Für den deutschen Sprachraum ist das auch das korrekte Zeichen. In Spanien und Frankreich werden als Auslassungspunkte allerdings drei einzelne Punkte verwendet.

Derzeit kann dies leider nur in Firefox angepasst werden.

text-overflow: '...';

Dadurch ist sogar so etwas möglich:

text-overflow: ' ...weiterlesen';

Mozilla zeigt in der Dokumentation für Entwickler noch weitere experimentelle Funktionen, die eine Aussicht darauf geben, was mit text-overflow in Zukunft möglich sein kann.

Mehrzeiligen Text mit CSS line-clamp kürzen

Mit CSS line-clamp können wir die maximale Anzahl an Zeilen festlegen, in die ein Text umbrechen darf. Hier wieder die Ausgangssituation:

Ausgangssituation: In der Breite beschränkter Container mit vier Zeilen Text

Voraussetzung ist die Kombination mit CSS display: -webkit-inline-box oder display: -webkit-box, sowie -webkit-box-orient: vertical und overflow: hidden.

Mit dem nachfolgenden CSS-Code können wir nun ganz einfach die maximale Zeilenanzahl auf drei beschränken. Am Ende der dritten Zeile wird außerdem automatisch eine Ellipse hinzufügen. Das Browser-Präfix -webkit- ist derzeit in allen Browsern notwendig.

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
CSS -webkit-line-clamp: 3;

Geschrieben von Felix Lehmann

thumb

Felix arbeitet als Frontend-Entwickler und Web-Designer bei kulturbanause®. Sein Hauptaufgabenbereich umfasst die Erstellung von Layouts und Vektorgrafiken, Mikroanimationen und modularen Website-Komponenten. Sowohl beim Entwickeln eines Prototyps als auch bei der Umsetzung eines individuellen WordPress-Themes legt er großen Wert auf eine angepasste Darstellung über alle Geräteklassen und Bildschirme hinweg.

Feedback & Ergänzungen – 1 Kommentar

  1. Max
    schrieb am 11.06.2021 um 08:48 Uhr:

    Danke für den Artikel! Für mehr Variabilität und IE11 Unterstützung, würde ich z.B. auf folgende Javascript Bibliothek zurückgreifen https://github.com/d-e-v-s-k/cuttr-js.

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: