Text Overflow

Variabler Text

Grundsätzlich müssen wir Text so einplanen, dass die Textmenge sich immer ausdehnen kann. Dass also jegliche Länge, kein Überlagern oder Überlappen von anderen Inhalten bewirkt.

Soweit der Grundsatz.

Aber es gibt zwei Möglichkeiten dem entgegenzuwirken.

1. Text-Schulung

Es lohnt sich mit den Menschen, welche den Inhalt auf der Webseite erfassen über Text- und Wortlängen und Web-Typografie zu sprechen. So kann schon vieles verhindert werden. 

Zu wissen wo, welcher Text, in welcher Länge sinnvoll ist, ist eine umfassende Aufgabe die Funktionalität, SEO und Inhaltsstrategien vereint.

2. Text-Overflow Nutzen

Wenn ein Parent-Container seinem Inhalt nicht mehr Platz geben kann (...) und somit der Inhalt aus dem Layout bricht, so regeln die Overflow Einstellungsmöglichkeiten das Verhalten.

Verschiedene Textlängen für eine «Teaser-Text-Box» um die visuellen Schwierigkeiten zu zeigen.

Weiterführende Inputs

Worttrennungen oder Themen zu den Möglichkeiten vom Einsatz von Typografie im Web gibt es hier.

Web-Typografie

Text Overflow Einstellungen

Es gibt Einstellungen wie man mit Text-Overflow umgehen kann.

Doch damit dies funktioniert muss der Container bereits folgende CSS-Properties haben:

overflow: hidden; Schneidet den Text beim Box-Ende ab.

overflow: scroll; ermöglicht das scrollen innerhalb des Parent-Containers.

white-space: nowrap; Macht, dass der Text in der Textbox nicht selbstständig bricht, sondern auf einer Zeile weiterläuft.

Text-Overflow

Ellipsis: Schneidet den Text ab und ersetzt ihn mit (...) den drei Punkten.

Clip: Schneidet den Text beim letzten ganzen Buchstaben vor Box-Ende ab.

Vertiefe dich ins ganze Kapitel

Variabler Inhalt