8.1 Das text-overflow Attribut
Textfluss und seine Anzeige sind wichtige Aspekte des Webdesigns, besonders bei der Arbeit mit langen Textzeilen oder in begrenzten Containern. Die Attribute text-overflow, white-space und word-wrap (heute bekannt als overflow-wrap) ermöglichen die Kontrolle, wie sich Text in solchen Situationen verhält.
Das text-overflow Attribut steuert, wie Text angezeigt wird, der über die Containergrenzen hinausgeht. Es wird zusammen mit den Attributen white-space und overflow verwendet, um einen Abschneideffekt des Textes und das Hinzufügen von Auslassungspunkten zu erzeugen.
Werte:
clip: schneidet den Text ab, der über die Containergrenzen hinausgehtellipsis: fügt Auslassungspunkte (...) am Ende des abgeschnittenen Textes hinzu
Beispielverwendung:
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #000;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
<body>
<div class="container clip">Dieser Text wird an der Containergrenze abgeschnitten.</div>
<div class="container ellipsis">Dieser Text wird abgeschnitten und durch Auslassungspunkte ersetzt.</div>
</body>
8.2 Das white-space Attribut
Das white-space Attribut steuert die Verarbeitung von Leerzeichen und den Zeilenumbruch. Es ermöglicht festzulegen, wie Leerzeichen, Tabulatoren und neue Zeilen im Text behandelt werden.
Werte:
normal: Leerzeichen und Zeilenumbrüche werden normal verarbeitet (Standard)nowrap: Text wird in einer Zeile ohne Umbrüche angezeigtpre: Leerzeichen und Zeilenumbrüche bleiben erhalten, wie im HTML-Tag<pre>pre-wrap: Leerzeichen und Zeilenumbrüche bleiben erhalten, aber Text kann bei Bedarf auf eine neue Zeile umgebrochen werdenpre-line: Zeilenumbrüche bleiben erhalten, aber Leerzeichen werden normal verarbeitetbreak-spaces: Leerzeichen und Zeilenumbrüche bleiben erhalten, und lange Leerzeichen können Zeilenumbrüche verursachen
Beispielverwendung:
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
<body>
<div class="normal">Dieser Text wird auf die nächste Zeile umgebrochen, wenn der Platz nicht ausreicht.</div>
<div class="nowrap">Dieser Text wird nicht auf die nächste Zeile umgebrochen und in einer Zeile angezeigt.</div>
<div class="pre">
Dieser Text behält
alle Leerzeichen und Zeilenumbrüche.
</div>
<div class="pre-wrap">
Dieser Text wird auf die nächste Zeile umgebrochen, behält aber auch
alle Leerzeichen und Zeilenumbrüche.
</div>
</body>
8.3 Das overflow-wrap Attribut
Das overflow-wrap Attribut (früher bekannt als word-wrap) steuert den Zeilenumbruch von Wörtern, die über die Containergrenzen hinausgehen. Es ermöglicht, das Überlaufen des Containers durch lange Wörter, die nicht geteilt werden können, zu verhindern.
Werte
normal: der Zeilenumbruch erfolgt gemäß den normalen Regeln für den Umbruchbreak-word: der Zeilenumbruch erfolgt, selbst wenn das Wort dafür geteilt werden muss
Beispielverwendung:
.container {
width: 200px;
border: 1px solid #000;
}
.normal {
overflow-wrap: normal;
}
.break-word {
overflow-wrap: break-word;
}
<body>
<div class="container normal">Dieser Text wird auf die nächste Zeile umgebrochen, wenn der Platz nicht ausreicht.</div>
<div class="container break-word">DieseslangeWortWIRDnichtumgebrochenaberwirdumgebrochenwennnichtgenugPlatzist.</div>
</body>
Codeerklärung:
overflow-wrap: normal;: der Zeilenumbruch erfolgt nach den Standardregeln, ohne die Wörter zu teilenoverflow-wrap: break-word;: lange Wörter werden geteilt und bei Bedarf auf die nächste Zeile umgebrochen
8.4 Gemeinsame Verwendung von Eigenschaften
Die Attribute text-overflow, white-space und word-wrap werden oft zusammen verwendet, um den gewünschten Anzeigeeffekt des Textes in begrenzten Containern zu erzielen.
Beispielverwendung:
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
border: 1px solid #000;
}
<body>
<div class="container">Dieser Text wird abgeschnitten und durch Auslassungspunkte ersetzt, wenn nicht genug Platz im Container ist.</div>
</body>
Codeerklärung:
white-space: nowrap;: Text wird in einer Zeile ohne Umbruch angezeigtoverflow: hidden;: versteckt Text, der über die Containergrenzen hinausgehttext-overflow: ellipsis;: fügt am Ende abgeschnittenen Textes Auslassungspunkte hinzuoverflow-wrap: break-word;: Lange Wörter werden gebrochen, wenn nicht genug Platz vorhanden ist
GO TO FULL VERSION