Wenn der Text zu lang ist: 2 Alternativen zum k…

Moin!

Wenn du Websites für deine Kund:innen umsetzt, dann kannst du im Rahmen einer Schulung darauf hinweisen, dass an manchen Stellen möglichst kurze Texte stehen sollen (und hoffen, dass er oder sie sich daran hält).

Für mich als Theme-Entwickler ist das aber eher nicht so leicht.

Ein Werkzeughersteller wird auch nicht verhindern können, dass seine Schraubenzieher Schraubendreher als Meißel, Hammer oder Brechstange zweckentfremdet werden. Er kann aber seine Werkzeuge so stabil machen, dass sie bei anderer Verwendung nicht direkt kaputt gehen.

Deswegen fragte ich mich: Wie kann ich Design-Elemente so stabil machen, dass sie bei längeren Texten nicht kaputt gehen?

Ein gutes Beispiel dafür sind Hero-Elemente, aber auch bei Card-Elementen kann man das Problem beobachten. Diese Elemente sind in der Regel so angelegt, dass eher wenig Text zum Einsatz kommt (auch damit das Text-zu-Bild-Verhältnis auf kleineren Bildschirmen noch passt).

Und was passiert, wenn nun doch deutlich mehr Text auf dem Bild steht, als ursprünglich vorgesehen?

Früher, als wir Texte nur absolut positionieren konnten, um sie auf das Bild zu legen, gab es praktisch keine Möglichkeit, dem darunter liegenden Bild mitzuteilen, dass der Text höher wird. Der Text ging entweder einfach über das Bild hinaus (und überlagerte vielleicht sogar noch andere Inhalte) oder er wurde mit overflow: hidden; am unteren Bildrand brutal abgeschnitten.

Heute gibt es – auch dank flexbox und grid –zum Glück 2 Alternativen:

1. object-fit: cover

Ich habe object-fit schon bei der ersten Version von SOLO vor vielen Jahren eingesetzt (damals noch mit Polyfill für den IE7 + 8), um Hero-Bilder nicht als background-image definieren zu müssen, die Responsive Images-Funktion in Contao nutzen zu können und die Bilder dennoch im richtigen Seitenverhältnis darzustellen.

Heute verwende ich object-fit: cover, um sicherzustellen, 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 aber auch ganz wunderbar, wenn der Text neben dem Bild steht, wie zum Beispiel oben bei der Newsliste in LASR.

2. line-clamp

Eine andere Möglichkeit zur Bildskalierung ist, den Text in der Höhe zu begrenzen. Wenn man die Maße des Text-Containers kennt, könnte man über height: calc(AnzahlZeilen * 1lh) + overflow: hidden eine feste Höhe definieren. Es gibt aber noch eine bessere Lösung, mittels line-clamp:

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

Diese Lösung begrenzt nicht nur Höhe genau auf die Zeilen (statt auf eine errechnete Höhe), sondern fügt auch noch ein PunktPunktPunkt am Ende des Textes hinzu. Wenn du mehr über line-clamp erfahren möchtest, dann schau dir mal folgenden Artikel an.

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

Falls du noch weitere Beispiele und Lösungen für den Umgang mit zu viel Text hast, dann antworte gerne auf diese Nachricht!

Erstma'
Dennis

PS: Vielen Dank für deine Newsletter-Bewertung! Ich habe mich riesig über die netten Worte gefreut.
PPS: Dir gefällt die Flaschenpost, aber du hast noch gar keine Bewertung geschrieben? Kein Problem, das kannst du hier nachholen: Bewertung schreiben

Zurück