Wenn der Text zu lang ist: object-fit und line-clamp

Wenn du Websites für deine Kund:innen umsetzt, kannst du in einer Schulung darauf hinweisen, dass an manchen Stellen möglichst kurze Texte stehen sollen — und hoffen, dass sich alle daran halten. Für Theme-Entwickler:innen ist selbst das keine Option.

Ein Werkzeughersteller kann auch nicht verhindern, dass seine Schraubendreher als Meißel, Hammer oder Brechstange zweckentfremdet werden. Er kann seine Werkzeuge aber so stabil machen, dass sie dabei nicht direkt kaputtgehen. Die Frage lautet also: Wie machst du Design-Elemente so stabil, dass sie bei längeren Texten nicht kaputtgehen?

Gute Beispiele dafür sind Hero-Elemente, aber auch bei Card-Elementen lässt sich das Problem beobachten. Diese Elemente sind in der Regel für eher wenig Text angelegt — auch damit das Text-zu-Bild-Verhältnis auf kleineren Bildschirmen noch passt.

Früher, als Texte nur absolut positioniert auf dem Bild liegen konnten, gab es praktisch keine Möglichkeit, dem darunter liegenden Bild mitzuteilen, dass der Text höher wird. Der Text ging entweder über das Bild hinaus (und überlagerte vielleicht sogar andere Inhalte) oder wurde mit overflow: hidden am unteren Bildrand brutal abgeschnitten. Heute gibt es — auch dank Flexbox und Grid — zwei Alternativen:

1. object-fit: cover

object-fit kam schon in der ersten SOLO-Version zum Einsatz (damals noch mit Polyfill für den IE 7 und 8), um Hero-Bilder nicht als background-image definieren zu müssen, die Responsive-Images-Funktion von Contao nutzen zu können und die Bilder dennoch im richtigen Seitenverhältnis darzustellen.

Heute stellt object-fit: cover sicher, dass mehr Text das Layout nicht zerschießt und die Bilder mit dem Inhalt „wachsen" — wie bei den Hero- und Card-Elementen in LASR. Das funktioniert auch wunderbar, wenn der Text neben dem Bild steht, zum Beispiel bei der Newsliste in LASR.

2. line-clamp

Die andere Möglichkeit: den Text in der Höhe begrenzen. Wenn man die Maße des Text-Containers kennt, könnte man über height: calc(AnzahlZeilen * 1lh) (siehe lh und rlh Units) plus overflow: hidden eine feste Höhe definieren. Es gibt aber eine bessere Lösung, mittels line-clamp:

.text_container {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

Diese Lösung begrenzt die Höhe genau auf die Zeilen (statt auf eine errechnete Höhe) und fügt zusätzlich ein „…" am Ende des Textes hinzu. Mehr über line-clamp erfährst du in diesem MDN-Artikel.

Gerade bei (News-)Teasern, bei denen es unkritisch ist, dass der Text gekürzt wird, ist line-clamp eine gute Lösung, um Texte auf eine einheitliche Länge zu bringen.