CSS text-overflow-Eigenschaft
Mit der CSS-Eigenschaft text-overflow legen Sie fest, wie überlaufender Inline-Text signalisiert wird. Werte und Beispiele.
Die CSS-Eigenschaft text-overflow legt fest, wie Inhalt, der seinen Container überläuft, dem Benutzer signalisiert wird – üblicherweise durch Abschneiden oder durch Ersetzen des verborgenen Teils mit einem Auslassungszeichen (…). Sie gehört zu den CSS3-Eigenschaften.
Diese Seite behandelt Syntax und Werte, die drei Bedingungen, die ein Box-Element erfüllen muss, damit text-overflow wirksam wird, das Kürzen mehrerer Zeilen, einen häufigen Flexbox-Fallstrick sowie eine vollständige Übersicht der Werte.
Warum drei Eigenschaften zusammen benötigt werden
Allein bewirkt text-overflow nichts. Es beschreibt lediglich, wie bereits überlaufender Text gerendert werden soll, daher muss der Text zuerst tatsächlich überlaufen und der überschüssige Teil ausgeblendet werden. Für das einzeilige Kürzen benötigen Sie alle drei folgenden Eigenschaften am selben Element:
white-space: nowrap— verhindert den Zeilenumbruch und zwingt den Text auf eine einzige Zeile, die über die Box hinausläuft.overflow: hidden— schneidet den Teil ab, der aus der Box herausragt (ohne diese Angabe wäre der Text außerhalb der Box sichtbar).text-overflow: ellipsis— weist den Browser an, den abgeschnittenen Text mit einem Auslassungszeichen anstelle eines harten Schnitts zu kennzeichnen.
Fehlt eine dieser Angaben, wird das Auslassungszeichen nicht angezeigt. Das Box-Element benötigt außerdem eine begrenzte Breite (oder max-width), damit überhaupt etwas überlaufen kann.
In CSS3 kann anstelle des Auslassungszeichens auch ein benutzerdefinierter string angegeben werden. Ein string-Wert darf Leerzeichen enthalten, oder es kann ein beliebiger anderer benutzerdefinierter string verwendet werden. In älteren Entwürfen der Spezifikation war auch eine URL zu einem Bild möglich, was jedoch gestrichen wurde.
| Anfangswert | clip |
|---|---|
| Gilt für | Block-Container-Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.textOverflow = "ellipsis"; |
Syntax
CSS text-overflow-Werte
text-overflow: clip | ellipsis | string | initial | inherit;Beispiel der text-overflow-Eigenschaft:
CSS text-overflow Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
white-space: nowrap;
background-color: #eee;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #666;
}
</style>
</head>
<body>
<h2>Text-overflow property example</h2>
<h3>text-overflow: ellipsis</h3>
<div>Lorem Ipsum</div>
</body>
</html>Ergebnis
Beispiel der text-overflow-Eigenschaft mit den Werten „clip", „ellipsis" und „initial":
CSS text-overflow clip, ellipsis Wertebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.element1 {
white-space: nowrap;
background-color: #eee;
width: 50px;
overflow: hidden;
text-overflow: clip;
border: 1px solid #666;
}
div.element2 {
white-space: nowrap;
background-color: #eee;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #666;
}
div.element3 {
white-space: nowrap;
background-color: #eee;
width: 50px;
overflow: hidden;
text-overflow: initial;
border: 1px solid #666;
}
</style>
</head>
<body>
<h2>Text-overflow property example</h2>
<h3>text-overflow: clip</h3>
<div class="element1">Lorem Ipsum</div>
<h3>text-overflow: ellipsis</h3>
<div class="element2">Lorem Ipsum</div>
<h3>text-overflow: initial</h3>
<div class="element3">Lorem Ipsum</div>
</body>
</html>Mehrere Zeilen kürzen
text-overflow: ellipsis funktioniert nur bei einer einzelnen Zeile. Um Text auf eine feste Anzahl von Zeilen zu begrenzen und nach der letzten Zeile ein Auslassungszeichen einzufügen, verwenden Sie den -webkit-line-clamp-Ansatz. Er wird trotz des Vendor-Präfixes von modernen Browsern weitgehend unterstützt:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 200px;
background-color: #eee;
border: 1px solid #666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
</head>
<body>
<h2>Clamp to two lines</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>Hier wird white-space: nowrap nicht gesetzt, da der Text umbrechen muss, bevor er begrenzt wird.
Fallstrick: Flexbox- und CSS Grid-Kindelemente
Ein Flex- oder Grid-Element hat standardmäßig min-width: auto, was verhindert, dass es unter die intrinsische Größe des Inhalts schrumpft. Das verhindert, dass overflow: hidden greift, sodass das Auslassungszeichen nie erscheint, obwohl alle drei Eigenschaften gesetzt sind. Die Lösung besteht darin, min-width: 0 (oder overflow: hidden) zum kürzenden Element hinzuzufügen:
.flex-child {
min-width: 0; /* allow the item to shrink */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
clip | Schneidet den Text an der Grenze des Inhaltsbereichs ab; das Abschneiden kann mitten in einem Zeichen erfolgen. Dies ist der Standardwert. | Ausprobieren » |
ellipsis | Rendert ein Auslassungszeichen („..."), um den abgeschnittenen Text anzuzeigen. Hinweis: Funktioniert nur bei einer einzelnen Textzeile. | Ausprobieren » |
<string> | Rendert den angegebenen string, um den abgeschnittenen Text darzustellen. Der string wird innerhalb des Inhaltsbereichs angezeigt. Hinweis: Eingeschränkte Unterstützung in älteren Browsern. | Ausprobieren » |
initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
inherit | Erbt die Eigenschaft vom übergeordneten Element. |