Zeilenumbrüche in CSS verhindern und Textumbruch gezielt steuern
Webbrowser brechen Text standardmäßig um, damit Inhalte innerhalb ihres Containers bleiben. In bestimmten Situationen soll eine Zeichenfolge oder eine Gruppe von Inline-Elementen jedoch vollständig in einer einzigen Zeile stehen. Typische Beispiele sind Navigationslinks, Beschriftungen von Schaltflächen, Code-Bezeichner, Tabellenzellen oder einzeilige Vorschauen mit gekürztem Text. CSS stellt dafür verschiedene Eigenschaften bereit, darunter white-space, overflow-wrap, word-break, hyphens, flex-wrap und text-overflow.
In diesem Tutorial werden diese Eigenschaften anhand praktischer Beispiele erklärt. Außerdem erfährst du, wie sie für eine einzeilige Kürzung mit Auslassungspunkten kombiniert werden und wie sich textbezogene CSS-Eigenschaften von Layout-Lösungen mit Flexbox und CSS Grid unterscheiden. Anschließend kannst du besser entscheiden, welche Eigenschaft sich für unterschiedliche Anwendungsfälle eignet, beispielsweise für Text in einem <span>, Elemente einer Navigation, lange Zeichenfolgen wie URLs oder Flex-Elemente, die nicht in eine neue Zeile umbrechen sollen.
Die wichtigsten Punkte
- Verwende zunächst
white-space: nowrap, wenn der Inhalt eines einzelnen Elements niemals umbrechen soll. Kann der Inhalt breiter als sein Container werden, solltest du zusätzlichoverflow: hiddenoderoverflow: autoeinsetzen, damit nicht die gesamte Seite horizontal scrollbar wird. - Für lange URLs, Hashes und andere lange Zeichenfolgen innerhalb von Karten oder Tabellenzellen eignet sich
overflow-wrap: break-word. Befindet sich der Text innerhalb eines Flex- oder Grid-Elements, istoverflow-wrap: anywherehäufig geeigneter, daanywherediemin-content-Breite beeinflusst und dadurch verhindert werden kann, dass das übergeordnete Element unnötig verbreitert wird. - Für eine einzeilige Kürzung mit Auslassungspunkten müssen
white-space: nowrap,overflow: hiddenundtext-overflow: ellipsisgemeinsam verwendet werden. Fehlt eine dieser drei Deklarationen, funktioniert die Ellipse nicht wie vorgesehen. - Soll ein Text nach zwei, drei oder einer beliebigen anderen Anzahl von Zeilen mit Auslassungspunkten abgeschnitten werden, kannst du
display: -webkit-box,-webkit-box-orient: vertical,-webkit-line-clamp: Nundoverflow: hiddenmiteinander kombinieren. Die moderne Kurzschreibweiseline-clampwird zunehmend unterstützt, während die Variante mit Präfix weiterhin eine breitere Kompatibilität bietet. flex-wrap: nowrapist bereits der Standardwert von Flexbox, verhindert einen Überlauf jedoch nicht automatisch. Flex-Kindelemente mit langen Texten sollten in vielen Fällenmin-width: 0erhalten. Andernfalls können sie sich weigern, kleiner als ihre intrinsische Inhaltsbreite zu werden, und dadurch ihren Container überlaufen.hyphens: autobenötigt einlang-Attribut am Element oder am übergeordneten<html>-Element. Für Safari sollte außerdem-webkit-hyphensverwendet werden. Beihyphens: manualentstehen Umbrüche ausschließlich an ausdrücklich im Markup eingefügten weichen Trennzeichen mit­.- Wähle die Eigenschaft passend zur Ebene, die du beeinflussen möchtest.
white-space,overflow-wrap,word-breakundhyphenswirken auf den Text eines einzelnen Elements.flex-wrapund die Größenbestimmung von Grid-Spalten steuern dagegen das Layout und damit die Beziehung zwischen mehreren Elementen.
Voraussetzungen
Um dieses Tutorial nachzuvollziehen, benötigst du:
- Einen Code-Editor deiner Wahl, beispielsweise
nanooder Visual Studio Code - Einen Webbrowser
- Grundkenntnisse in HTML. Wenn du die Grundlagen auffrischen möchtest, kann ein einführendes HTML-Tutorial hilfreich sein.
Was verursacht unerwünschte Zeilenumbrüche in CSS?
Unerwünschte Zeilenumbrüche lassen sich meist auf drei grundlegende Ursachen zurückführen. Für jede Ursache eignet sich eine andere Lösung. Deshalb solltest du zunächst feststellen, warum der Umbruch entsteht, bevor du eine CSS-Eigenschaft auswählst.
- Text wird innerhalb eines einzelnen Elements umgebrochen. Das Element ist schmaler als sein Inhalt, sodass der Browser den Text an einer geeigneten Leerstelle auf die nächste Zeile verteilt. Setze direkt auf dem Element
white-space: nowrap. Falls notwendig, kannst du die Eigenschaft mitoverflowundtext-overflowkombinieren, um überstehenden Inhalt abzuschneiden. - Eine lange Zeichenfolge besitzt keine geeigneten Umbruchstellen. Eine URL, ein Hash oder ein generiertes Token kann keine natürlichen Stellen für einen Zeilenumbruch enthalten. Dadurch reicht der Text über die Grenzen seines Containers hinaus. Verwende auf dem entsprechenden Element
overflow-wrap: break-wordoderoverflow-wrap: anywhere. - Benachbarte Elemente werden auf unterschiedliche Zeilen verteilt. Mehrere Inline- oder Flex-Elemente beginnen in derselben Zeile, können bei knappem Platz jedoch auf verschiedene Zeilen verteilt werden. Für Inline-Inhalte innerhalb eines Blockelements kannst du
white-space: nowrapauf dem übergeordneten Element verwenden. Bei einem Flex-Layout eignen sichflex-wrap: nowrapsowiemin-width: 0auf den betreffenden Kindelementen.
Die folgenden Abschnitte behandeln die passende Eigenschaft für jeden dieser Fälle und zeigen zusätzlich Layout-Lösungen für Situationen, in denen reine Texteigenschaften nicht ausreichen.
white-space: nowrap verwenden, um Zeilenumbrüche zu verhindern
Mit white-space: nowrap verhinderst du, dass ein Browser den Text innerhalb eines Elements automatisch auf eine neue Zeile umbricht. Dabei spielt die verfügbare Breite des Elements keine Rolle. Diese Einstellung eignet sich, wenn der vollständige Textinhalt zwingend in einer einzigen Zeile stehen soll.
Syntax und grundlegende Verwendung
Die Eigenschaft white-space unterstützt sechs Schlüsselwörter. Jedes davon legt fest, wie aufeinanderfolgende Leerzeichen behandelt werden, ob Zeilenumbrüche aus dem Quelltext erhalten bleiben und ob der Browser automatisch neue Zeilen erzeugen darf.
white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces
Die Werte verhalten sich folgendermaßen:
normal: Mehrere aufeinanderfolgende Leerzeichen werden zusammengefasst und Text wird bei Bedarf umgebrochen.nowrap: Leerzeichen werden zusammengefasst, automatische Zeilenumbrüche innerhalb des Elements jedoch verhindert.pre: Leerzeichen und Zeilenumbrüche aus dem Quelltext bleiben erhalten. Zusätzliche Umbrüche entstehen nur an vorhandenen Zeilenumbrüchen.pre-wrap: Leerzeichen und Zeilenumbrüche bleiben erhalten, gleichzeitig darf der Browser den Text umbrechen, wenn dadurch ein Überlauf vermieden werden kann.pre-line: Aufeinanderfolgende Leerzeichen werden zusammengefasst, vorhandene Zeilenumbrüche bleiben bestehen und zusätzliche Umbrüche sind bei Bedarf möglich.break-spaces: Verhält sich ähnlich wiepre-wrap, allerdings können auch Leerzeichen am Ende einer Zeile als mögliche Umbruchstelle dienen.
Zeilenumbrüche in einem <span>-Element verhindern
Setze white-space: nowrap auf ein Span-Element, wenn dessen gesamter Inhalt zusammenbleiben soll. Beispielsweise kannst du eine Telefonnummer, eine Produktkennung oder eine andere kurze Zeichenfolge in ein Span einschließen und dort den Umbruch verhindern.
<p>Rufen Sie uns heute unter <span class="no-break">(555) 123-4567</span> an.</p>
.no-break {
white-space: nowrap;
}
Zeilenumbrüche in Navigationslisten verhindern
Wende white-space: nowrap auf einzelne li– oder a-Elemente an, damit die Beschriftungen einer Navigation nicht auf mehrere Zeilen verteilt werden. Sowohl das Listenelement als auch der Link selbst können dafür verwendet werden. Dadurch bleibt jede Menübezeichnung auch bei kleiner werdender Bildschirmbreite zusammen.
<ul class="site-nav">
<li><a href="/docs">Dokumentation</a></li>
<li><a href="/pricing">Preise</a></li>
<li><a href="/contact">Vertrieb kontaktieren</a></li>
</ul>
.site-nav li,
.site-nav a {
white-space: nowrap;
}
Zeilenumbrüche zwischen einem Inline-Bild und seiner Beschriftung verhindern
Lege ein Symbol und den dazugehörigen Text in denselben Inline-Container und wende white-space: nowrap auf diesen Container an. Dadurch können Bild und Beschriftung nicht auf unterschiedliche Zeilen verteilt werden.
<p>Status: <span class="status"><img src="/img/check.svg" alt="" width="16" height="16"> Bestätigt</span></p>
.status {
white-space: nowrap;
}
Das Inline-Bild und das Wort „Bestätigt“ bleiben dadurch in einer gemeinsamen Zeile, selbst wenn der übrige Text des Absatzes umgebrochen wird.
Wann white-space: nowrap die richtige Wahl ist
nowrap eignet sich besonders für kurze Zeichenfolgen, von Benutzern eingegebene Werte oder Bezeichner, die als zusammengehörige Einheit gelesen werden müssen. Dazu gehören beispielsweise Tabellenzellen, die nicht aufgeteilt werden sollen, Badges und andere Elemente, bei denen horizontaler Überlauf akzeptabel ist oder durch eine Kürzung abgefangen wird. Für lange Fließtexte ist diese Einstellung weniger geeignet, da sehr lange Textzeilen die Lesbarkeit deutlich verschlechtern können, sofern der Inhalt nicht abgeschnitten oder horizontal scrollbar gemacht wird.
overflow-wrap zur Steuerung von Umbrüchen innerhalb langer Wörter verwenden
Die Eigenschaft overflow-wrap legt fest, ob ein Browser innerhalb einer Zeichenfolge umbrechen darf, die normalerweise keine geeignete Umbruchstelle enthält. Vorhandene Leerzeichen bleiben dabei reguläre Umbruchmöglichkeiten. Zusätzlich können weitere Stellen für einen Zeilenumbruch geschaffen werden, wenn dies notwendig ist, um einen Überlauf zu verhindern.
overflow-wrap: normal im Vergleich zu overflow-wrap: break-word und overflow-wrap: anywhere
Mit normal sind Zeilenumbrüche nur an den üblichen Stellen möglich. break-word erlaubt es dem Browser zusätzlich, lange zusammenhängende Zeichenfolgen aufzuteilen, wenn andernfalls ein Überlauf entstehen würde. anywhere führt optisch zu einem ähnlichen Ergebnis, berücksichtigt diese zusätzlichen Umbruchstellen jedoch auch bei der Berechnung der benötigten Größe innerhalb des Layouts.
Dieser Unterschied ist besonders bei Flexbox und CSS Grid relevant. Browser berechnen für jedes Element eine sogenannte min-content-Größe, um festzustellen, wie stark es verkleinert werden darf. Bei break-word werden die zusätzlichen Umbruchstellen für diese Berechnung nicht berücksichtigt. Ein Flex-Element mit einer langen URL kann deshalb weiterhin eine große min-content-Breite melden und sich gegen eine Verkleinerung sperren. Bei anywhere fließen diese möglichen Umbruchstellen dagegen in die Berechnung ein, sodass das Element stärker verkleinert werden kann. Für normalen Text in statischen Containern ist break-word geeignet. Text in Flex- oder Grid-Elementen, der seinen übergeordneten Container nicht vergrößern soll, profitiert häufig von anywhere.
Praktisches Beispiel mit langen, nicht umbrechbaren Zeichenfolgen
Die folgenden beiden Elemente enthalten dieselbe lange URL. Das erste Element nutzt overflow-wrap: normal und kann dadurch über seinen Container hinausragen. Beim zweiten Element sorgt overflow-wrap: break-word dafür, dass die URL innerhalb der verfügbaren Breite umgebrochen werden kann.
<p class="wrap-normal">https://www.example.com/path/very-long-segment-without-spaces-that-would-overflow</p>
<p class="wrap-break">https://www.example.com/path/very-long-segment-without-spaces-that-would-overflow</p>
.wrap-normal {
overflow-wrap: normal;
max-width: 220px;
border: 1px solid #ccc;
}
.wrap-break {
overflow-wrap: break-word;
max-width: 220px;
border: 1px solid #ccc;
}
Die Eigenschaft overflow-wrap hieß früher word-wrap. Browser akzeptieren word-wrap weiterhin als Alias. Für neue Stylesheets sollte jedoch vorzugsweise overflow-wrap verwendet werden.
word-break für Umbrüche auf Wort- und Zeichenebene verwenden
Mit word-break lässt sich bestimmen, wie Zeilenumbrüche innerhalb von Wörtern erfolgen dürfen. Das gilt unter anderem für Inhalte in chinesischer, japanischer oder koreanischer Schrift. Die separate Eigenschaft hyphens regelt dagegen die automatische Silbentrennung. Gemeinsam ermöglichen beide Eigenschaften eine genauere Steuerung in Situationen, in denen normale Leerzeichen nicht genügend Umbruchmöglichkeiten bieten.
word-break: keep-all und geeignete Anwendungsfälle
Die Deklaration word-break: keep-all verhindert bei CJK-Texten Umbrüche innerhalb von Wörtern. word-break: break-all erlaubt dagegen Umbrüche zwischen nahezu beliebigen Zeichen. Verwende keep-all für chinesische, japanische oder koreanische Inhalte, wenn Umbrüche innerhalb zusammengehöriger Wörter vermieden werden sollen. break-all kann dagegen bei kompakten Zeichenfolgen in lateinischer Schrift sinnvoll sein, beispielsweise bei Commit-Hashes, Base64-Werten oder automatisch erzeugten Kennungen in schmalen Tabellenzellen, wenn ein Umbruch einem horizontalen Überlauf vorzuziehen ist.
<p class="hash">a3f5b8e2c9d7f4a1b6e8d2c5f9a3b7e1d4c8f2a5b9e3c7d1f4a8b2e5c9d3f6a0</p>
.hash {
word-break: break-all;
max-width: 240px;
font-family: monospace;
border: 1px solid #ddd;
padding: 0.5rem;
}
Der Hash kann nun an beliebigen Zeichenpositionen umbrechen und bleibt innerhalb des Containers. Ohne word-break: break-all könnte dieselbe Zeichenfolge über den rechten Rand hinausragen.
Trennstriche bei Zeilenumbrüchen mit hyphens steuern
Die Eigenschaft hyphens bietet drei grundlegende Modi. none deaktiviert die automatische Silbentrennung. manual erlaubt Trennungen ausschließlich an weichen Trennzeichen, die ausdrücklich im Markup eingefügt wurden. auto überlässt die Trennung dagegen dem Browser und den Regeln der angegebenen Sprache.
Um die Silbentrennung vollständig zu deaktivieren, verwende sowohl die Variante mit Präfix als auch die unpräfixierte Eigenschaft:
.no-hyphenation {
-webkit-hyphens: none;
hyphens: none;
}
Sollen Wörter nur an von dir festgelegten Positionen getrennt werden, kannst du weiche Trennzeichen mit ­ in das Markup einfügen und hyphens: manual verwenden:
<p class="manual-hyphens">extra­ordinary docu­mentation</p>
.manual-hyphens {
-webkit-hyphens: manual;
hyphens: manual;
}
Der Browser verwendet die definierten weichen Trennstellen nur dann, wenn die verfügbare Zeilenbreite nicht ausreicht. Ist kein Umbruch erforderlich, bleiben die weichen Trennzeichen unsichtbar.
Damit der Browser selbst eine sprachabhängige Silbentrennung durchführen kann, gib eine Sprache an und setze hyphens: auto:
<article lang="en">
<p class="auto-hyphens">Antidisestablishmentarianism is a notably long English word.</p>
</article>
.auto-hyphens {
-webkit-hyphens: auto;
hyphens: auto;
}
hyphens: auto funktioniert nicht ohne ein lang-Attribut auf dem Element selbst oder auf einem übergeordneten Element. Üblicherweise wird die Sprache auf dem <html>-Element angegeben. Der Browser verwendet diese Sprachinformation, um die passenden Regeln für die Silbentrennung anzuwenden. Fehlt die Sprachangabe, stehen keine entsprechenden Regeln zur Verfügung. Die Unterstützung hängt außerdem von der jeweiligen Sprache ab. Für Sprachen wie Englisch, Deutsch, Französisch und Spanisch ist sie meist weit verbreitet, während weniger verbreitete Sprachen möglicherweise nur eingeschränkt unterstützt werden.
Flexbox verwenden, um Zeilenumbrüche zwischen Elementen zu verhindern
Mit flex-wrap: nowrap auf einem Flex-Container bleiben sämtliche Flex-Kindelemente in einer gemeinsamen Flex-Zeile. Diese Layout-Einstellung ist geeignet, wenn mehrere Elemente nebeneinander angeordnet werden und nicht in eine zweite Zeile verschoben werden sollen.
flex-wrap: nowrap für Gruppen von Inline-Elementen
nowrap ist der Anfangswert von flex-wrap. Ein Flex-Container hält seine Kindelemente daher standardmäßig in einer einzigen Zeile, solange kein anderer Wert festgelegt wird. Passen die Elemente nicht mehr in den verfügbaren Platz, hängt ihr Verhalten unter anderem von flex-shrink, min-width und dem overflow-Wert des übergeordneten Elements ab. Sie können schrumpfen, überlaufen oder scrollbar werden.
Ein häufiges Überlaufproblem bei Flexbox wird nicht direkt durch flex-wrap verursacht. Flex-Elemente verwenden standardmäßig min-width: auto. Dadurch können sie daran gehindert werden, schmaler als die intrinsische Breite ihres Inhalts zu werden. Enthält ein Flex-Kindelement beispielsweise ein langes Wort oder eine lange URL, kann es sich gegen eine Verkleinerung sperren und den übergeordneten Container breiter als den sichtbaren Bereich machen. Mit min-width: 0 und häufig zusätzlich overflow: hidden erlaubst du dem Flex-Kindelement, tatsächlich zu schrumpfen. Diese Einstellung behebt viele typische Flexbox-Überläufe auf kleinen Bildschirmen.
.flex-child-shrinks {
min-width: 0;
overflow: hidden;
}
Praktisches Beispiel einer Navigationsleiste mit Flexbox
Eine horizontale ul-Liste mit display: flex, flex-wrap: nowrap und gap kann alle Navigationslinks in einer gemeinsamen Zeile halten und gleichzeitig gleichmäßige Abstände zwischen den Elementen erzeugen.
<nav aria-label="Hauptnavigation">
<ul class="nav-row">
<li><a href="/">Startseite</a></li>
<li><a href="/product">Produkt</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/support">Support</a></li>
</ul>
</nav>
.nav-row {
display: flex;
flex-wrap: nowrap;
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
}
CSS Grid verwenden, um Elemente in einer Zeile zu halten
Mit einem einzeiligen CSS-Grid können Grid-Elemente horizontal auf einer einzigen Zeile angeordnet werden. Dazu wird eine Zeile verwendet und für jedes Element eine entsprechende Spalte erzeugt. Diese Lösung eignet sich, wenn eine spaltenorientierte Ausrichtung gewünscht ist, ohne sich auf die Schrumpfregeln von Flexbox entlang der Hauptachse verlassen zu müssen.
Einzeiliges Grid-Layout ohne Umbruch
Durch die Kombination aus grid-auto-flow: column und grid-auto-columns: max-content entsteht eine einzelne Zeile mit so vielen Spalten, wie Elemente vorhanden sind. Grid kann gegenüber Flexbox vorteilhaft sein, wenn jedes Element seine Breite anhand des eigenen Inhalts bestimmen soll, ohne den Schrumpfmechanismus der Flexbox-Hauptachse zu verwenden.
Eine Breadcrumb-Navigation ist ein typischer Anwendungsfall. Jeder Abschnitt erhält eine eigene Spalte und die komplette Navigationszeile bleibt selbst auf schmaleren Ansichten einzeilig:
<nav aria-label="Breadcrumb" class="breadcrumb">
<a href="/">Startseite</a>
<span aria-hidden="true">/</span>
<a href="/resources">Ressourcen</a>
<span aria-hidden="true">/</span>
<a href="/resources/tutorials">Tutorials</a>
<span aria-hidden="true">/</span>
<span aria-current="page">Zeilenumbrüche verhindern</span>
</nav>
.breadcrumb {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
column-gap: 0.5rem;
overflow-x: auto;
}
Wird die Breadcrumb-Zeile breiter als der sichtbare Bereich, erzeugt overflow-x: auto horizontales Scrollen, anstatt die einzelnen Elemente auf eine zweite Zeile umzubrechen.
Wenn immer eine feste Anzahl von Elementen vorhanden ist, kannst du die Anzahl der Spalten mit repeat ausdrücklich festlegen:
.fixed-row {
display: grid;
grid-template-columns: repeat(4, max-content);
column-gap: 0.75rem;
}
Mit max-content wird jede Spalte entsprechend der Breite ihres Inhalts dimensioniert. Dadurch verwendet die Zeile nur so viel horizontalen Platz, wie ihre Elemente tatsächlich benötigen.
Für eine einzeilige Textkürzung mit Auslassungspunkten werden drei CSS-Deklarationen gemeinsam benötigt: white-space: nowrap, overflow: hidden und text-overflow: ellipsis. Wird eine dieser Eigenschaften weggelassen, funktioniert das gewünschte Ellipsen-Verhalten nicht zuverlässig.
Das Drei-Eigenschaften-Muster mit white-space, overflow und text-overflow
Jede der drei Deklarationen übernimmt einen eigenen Teil der Kürzung. white-space: nowrap hält den Text in einer einzigen Zeile, sodass horizontaler Überlauf eindeutig bestimmt werden kann. overflow: hidden blendet den Bereich außerhalb des Elements aus. text-overflow: ellipsis zeigt an der Stelle des abgeschnittenen Inhalts Auslassungspunkte an. Wird der Container breiter, erscheint wieder mehr oder der gesamte Text. Wird er schmaler, wird entsprechend mehr Inhalt verborgen.
Code-Beispiel für eine Kürzung mit Auslassungspunkten
Wende die drei Eigenschaften auf eine Überschrift innerhalb einer Karte oder eines anderen Elements mit begrenzter Breite an.
<article class="card">
<h2 class="card-title">
Notizen zur vierteljährlichen Designprüfung des gesamten Produktteams
</h2>
</article>
.card {
max-width: 280px;
border: 1px solid #ddd;
padding: 1rem;
}
.card-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Text mit -webkit-line-clamp auf mehrere Zeilen begrenzen
Soll ein Text auf zwei, drei oder eine andere festgelegte Anzahl von Zeilen beschränkt und anschließend mit Auslassungspunkten gekürzt werden, kannst du display: -webkit-box, -webkit-box-orient: vertical, -webkit-line-clamp: N und overflow: hidden miteinander kombinieren. Die Variante mit dem präfixierten -webkit-box-Modell ist weiterhin eine weit verbreitete Methode für mehrzeiliges Text-Clamping.
<article class="card">
<h2 class="card-title">Notizen zur vierteljährlichen Designprüfung</h2>
<p class="card-summary">
Das Produktteam überprüfte das neue Dashboard-Layout, den Migrationsplan
für die bisherige Administrationsoberfläche und den Einführungszeitplan
für die nächsten beiden Quartale. Mehrere Aufgaben wurden zur weiteren
Bearbeitung für die kommende Woche zugewiesen.
</p>
</article>
.card {
max-width: 320px;
border: 1px solid #ddd;
padding: 1rem;
}
.card-summary {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
Die Zusammenfassung wird dadurch auf drei Zeilen begrenzt und am Ende automatisch mit einer Ellipse versehen. Ändere den Wert von -webkit-line-clamp, wenn eine andere Anzahl sichtbarer Zeilen benötigt wird.
Die unpräfixierte Eigenschaft line-clamp und weitere Mechanismen ohne Präfix werden im Rahmen der CSS-Overflow-Spezifikation weiterentwickelt und zunehmend von modernen Browsern unterstützt. Solange die Unterstützung noch nicht überall vollständig ist, kann das -webkit--Muster als primäre Variante verwendet und die unpräfixierte line-clamp-Deklaration bei entsprechender Browserunterstützung ergänzend eingesetzt werden.
Hinweis zur Barrierefreiheit bei gekürzten Texten
Sowohl einzeilige als auch mehrzeilige Kürzungen verbergen einen Teil des Textes lediglich visuell, während der vollständige Inhalt in der Regel weiterhin im Accessibility Tree vorhanden bleibt. Screenreader können deshalb den gesamten Text ausgeben. Dieses Verhalten ist häufig erwünscht, kann aber zu Unterschieden zwischen dem sichtbaren Inhalt und der Ausgabe assistiver Technologien führen. Handelt es sich beim gekürzten Element um einen Link oder eine Schaltfläche, kann der zugängliche Name länger sein als die sichtbare Beschriftung. Bei langen Überschriften in Karten kann ein title-Attribut verwendet oder der vollständige Text bei Fokus und Hover in einem Tooltip angezeigt werden, damit sowohl Tastatur- als auch Mausnutzer auf den ausgeblendeten Inhalt zugreifen können.
Vergleich der CSS-Eigenschaften
Die folgende Tabelle fasst die in diesem Tutorial behandelten CSS-Eigenschaften zusammen und zeigt, für welche Art von Problem sie jeweils geeignet sind.
| Eigenschaft | Zweck | Häufige Werte | Hinweise und Besonderheiten |
|---|---|---|---|
white-space |
Steuert das Zusammenfassen oder Beibehalten von Leerzeichen und bestimmt, ob Zeilen umgebrochen werden dürfen | normal, nowrap, pre, pre-wrap, pre-line, break-spaces |
Breit unterstützt. Eine lange Zeichenfolge ohne natürliche Umbruchstellen kann trotzdem überlaufen. Bei nicht vorhersehbarer Inhaltslänge kann deshalb eine Kombination mit overflow-wrap erforderlich sein. |
overflow-wrap |
Erlaubt Umbrüche innerhalb langer Zeichenfolgen, um Überlauf zu vermeiden | normal, anywhere, break-word |
Breit unterstützt. break-word und anywhere können optisch gleich aussehen, beeinflussen die min-content-Berechnung jedoch unterschiedlich. Das ist besonders für Flex- und Grid-Layouts relevant. |
word-break |
Steuert Umbrüche innerhalb von Wörtern, insbesondere bei CJK-Inhalten | normal, break-all, keep-all |
Breit unterstützt. Der veraltete Wert word-break: break-word ist separat zu betrachten und sollte durch overflow-wrap: break-word ersetzt werden. |
hyphens |
Steuert automatische und manuelle Silbentrennung | none, manual, auto |
Safari benötigt -webkit-hyphens. Für hyphens: auto muss außerdem ein lang-Attribut auf dem Element oder auf dem <html>-Element vorhanden sein. |
flex-wrap |
Bestimmt, ob Flex-Elemente auf zusätzliche Zeilen verteilt werden dürfen | nowrap, wrap, wrap-reverse |
Breit unterstützt. nowrap ist der Standardwert. Viele Überlaufprobleme in mobilen Flex-Layouts entstehen durch das standardmäßige min-width: auto der Flex-Kindelemente und nicht durch flex-wrap selbst. |
text-overflow |
Steuert die visuelle Darstellung von abgeschnittenem, überlaufendem Text | clip, ellipsis, Zeichenfolgenwerte |
Breit unterstützt. Für eine Ellipse werden in der Regel zusätzlich overflow: hidden oder overflow: scroll und white-space: nowrap auf demselben Element benötigt. |
Aktuelle Informationen zur Browserkompatibilität einzelner CSS-Eigenschaften findest du in den MDN Web Docs.
Die passende Technik für den jeweiligen Anwendungsfall auswählen
Welche CSS-Eigenschaft geeignet ist, hängt davon ab, ob du den Umbruch innerhalb eines einzelnen Elements oder die Anordnung mehrerer Elemente beeinflussen möchtest. Ausgangspunkt sollte immer der Bereich der Dokumentstruktur sein, den du konkret gestalten kannst. Anschließend kannst du die Eigenschaft auswählen, die genau auf dieser Ebene wirkt.
Entscheidungshilfe nach Elementtyp und Kontext
Orientiere dich am Element und dem gewünschten Verhalten und wähle anschließend die passende CSS-Technik:
- Für eine einzelne Textzeile innerhalb eines Elements:
white-space: nowrap. - Für eine einzeilige Vorschau mit Auslassungspunkten:
white-space: nowrap,overflow: hiddenundtext-overflow: ellipsisgemeinsam verwenden. - Für eine mehrzeilige Vorschau mit Auslassungspunkten nach zwei, drei oder einer anderen Anzahl von Zeilen:
display: -webkit-box,-webkit-box-orient: vertical,-webkit-line-clamp: Nundoverflow: hidden. - Für eine lange URL oder einen Hash, der in einem statischen Layout aus einer Karte oder Tabellenzelle herausragt:
overflow-wrap: break-word. - Für eine lange URL oder einen Hash innerhalb eines Flex- oder Grid-Elements, das sich nicht ausreichend verkleinert:
overflow-wrap: anywhereauf dem Text undmin-width: 0auf dem entsprechenden Flex- oder Grid-Kindelement. - Für Navigationslinks, die nicht in eine zweite Zeile umbrechen sollen:
flex-wrap: nowrapauf dem übergeordneten Element. Enthalten einzelne Kindelemente längere Inhalte, kann dort zusätzlichmin-width: 0notwendig sein. - Zum Deaktivieren automatischer Silbentrennung:
hyphens: nonezusammen mit-webkit-hyphens: none. - Zum Aktivieren browsergesteuerter Silbentrennung:
hyphens: autozusammen mit-webkit-hyphens: autound einemlang-Attribut auf dem Element oder dem<html>-Element. - Für CJK-Texte, bei denen Umbrüche innerhalb von Wörtern vermieden werden sollen:
word-break: keep-all. - Für dichte Zeichenfolgen in lateinischer Schrift wie Hashes oder Base64-Werte in schmalen Containern:
word-break: break-all.
Häufig gestellte Fragen
Welche CSS-Eigenschaft verhindert einen Zeilenumbruch bei einer einzelnen Textzeile am einfachsten?
Die einfachste Lösung ist white-space: nowrap. Dadurch verhindert der Browser automatische Zeilenumbrüche innerhalb des betreffenden Elements. Wenn gleichzeitig ein möglicher Überlauf berücksichtigt werden muss, kannst du zusätzlich eine Breitenbegrenzung, horizontales Scrollen oder eine Textkürzung verwenden.
Wie verhindere ich einen Zeilenumbruch zwischen zwei Inline-Elementen wie <span>?
Lege beide Span-Elemente in ein gemeinsames übergeordnetes Element und setze dort white-space: nowrap. Alternativ kannst du den gemeinsamen Container mit display: flex zu einem Flex-Container machen und flex-wrap: nowrap verwenden. Beide Varianten verhindern, dass die beiden Kindelemente auf unterschiedliche Zeilen verteilt werden.
Was ist der Unterschied zwischen white-space: nowrap und overflow: hidden?
white-space: nowrap bestimmt, ob Text innerhalb eines Elements auf zusätzliche Zeilen umbrechen darf. overflow: hidden entscheidet dagegen, wie mit Inhalten umgegangen wird, die über die Grenzen des Elements hinausragen, und blendet diesen überstehenden Bereich aus. Beide Eigenschaften lösen unterschiedliche Probleme und werden häufig zusammen mit text-overflow: ellipsis verwendet, wenn einzeilige Beschriftungen gekürzt dargestellt werden sollen.
Wie verhindere ich, dass CSS beim Umbrechen eines langen Wortes einen Trennstrich einfügt?
Setze hyphens: none auf das Element, für das keine automatische Silbentrennung verwendet werden soll, und ergänze für Safari -webkit-hyphens: none. Prüfe außerdem, ob word-break: break-all Zeichenumbrüche erzwingt, und gib dem Element bei Bedarf eine feste Breite, damit sich das Umbruchverhalten zuverlässig beurteilen lässt.
Wie verhindere ich, dass Listenelemente einer Navigation in eine zweite Zeile umbrechen?
Du kannst white-space: nowrap auf jedes li– oder a-Element anwenden. Alternativ kannst du die ul-Liste mit display: flex darstellen, flex-wrap: nowrap verwenden und die Abstände über gap oder Margins festlegen. Beide Varianten halten die Navigationsbezeichnungen in einer gemeinsamen Zeile, solange du keinen Umbruch ausdrücklich erlaubst.
Funktioniert white-space: nowrap auch bei Blockelementen wie <div>?
Ja. Die Eigenschaft white-space kann auf jedes Element angewendet werden. Auch bei einem Blockelement beeinflusst sie, wie der enthaltene Text intern umgebrochen wird. Ein Blockelement kann standardmäßig die gesamte verfügbare Breite seines übergeordneten Elements einnehmen. Bei langen Texten solltest du deshalb gegebenenfalls zusätzlich horizontalen Überlauf oder eine Textkürzung berücksichtigen.
Welche CSS-Eigenschaft verhindert Zeilenumbrüche zwischen Flex-Kindelementen?
Verwende flex-wrap: nowrap auf dem Flex-Container. Dieser Wert ist bereits der Standard von Flexbox. Die Kindelemente bleiben daher in einer gemeinsamen Zeile, solange nicht ausdrücklich flex-wrap: wrap aktiviert wird.
Welche Methode eignet sich am besten, um Zeilenumbrüche in einem responsiven Layout zu verhindern?
Nutze bei horizontalen Layouts flex-wrap: nowrap, wenn die Elemente zwingend auf einer gemeinsamen Zeile bleiben sollen. Ergänze bei Bedarf overflow: auto oder overflow: hidden auf dem Container, falls die vollständige Zeile breiter als der sichtbare Bereich werden kann. Für reine Textvorschauen kannst du white-space: nowrap, overflow: hidden und text-overflow: ellipsis kombinieren. Lange Zeichenfolgen, die ansonsten aus Karten oder ähnlichen Containern herausragen würden, lassen sich mit overflow-wrap: break-word kontrollieren.
Fazit
Dieses Tutorial hat die Eigenschaften white-space, overflow-wrap, word-break, hyphens, flex-wrap und text-overflow behandelt und gezeigt, welche Art von Umbruchproblem mit welcher Eigenschaft gelöst werden kann. Dazu gehören Text, der innerhalb eines einzelnen Elements umbricht, lange nicht umbrechbare Zeichenfolgen, die ihren Container überlaufen, sowie benachbarte Inline-Elemente, die auf unterschiedliche Zeilen verteilt werden. Darüber hinaus wurden einzeilige und mehrzeilige Kürzungen mit Auslassungspunkten, die Bedeutung von min-width: 0 für schrumpfende Flex-Kindelemente, die Voraussetzung eines lang-Attributs für hyphens: auto und der Unterschied bei der min-content-Berechnung zwischen overflow-wrap: break-word und overflow-wrap: anywhere erläutert.
Damit kannst du ein Umbruchproblem anhand seines sichtbaren Verhaltens erkennen, die CSS-Eigenschaft auswählen, die direkt auf die jeweilige Ursache wirkt, und bei Bedarf textbezogene sowie layoutbezogene Lösungen miteinander kombinieren. Gleichzeitig lassen sich typische Fehler besser erkennen, die zunächst wie reine Umbruchprobleme wirken, tatsächlich aber auf die Größenberechnung zurückzuführen sind, beispielsweise ein Flex-Kindelement, das sich aufgrund seines standardmäßigen min-width: auto nicht ausreichend verkleinern lässt.
