CSS text-overflow - Verhalten bei langen Texten festlegen

Wenn Elementen eine bestimmte Breite vergeben wurden, werden Texte am Ende der Zeile an den Leer- oder Trennzeichen umgebrochen und der Text wird in der nächsten Zeile fortgeführt. In CSS kann man über white-space festlegen, dass keine Zeilenumbrüche erfolgen sollen. In solchen Fällen ragen zu lange Texte über die Breite des Elements hinaus. Dabei kann über die Eigenschaft text-overflow das Verhalten beeinflusst werden. Beispielsweise kann man festlegen, dass der Text abgeschnitten und mit Auslassungspunkten (Ellipsis, Unicode-Wert U+2026) dargestellt wird.

CSS text-overflow

Es ist zwar möglich, die Eigenschaft text-overflow auf mehrzeilige Texte anzuwenden. Sie eignet sich jedoch eher für einzeilige Texte, da die Eigenschaft in jeder Zeile zur Anwendung kommen könnte und das sieht nicht immer ansprechend aus. Nachfolgend ist die Syntax anhand eines Beispiels abgebildet.

CSS-Code für text-overflow

Allerdings bewirkt der CSS-Code alleine noch nichts. Erst im Zusammenhang mit den Eigenschaften overflow und white-space mit den folgenden Werten hat es einen Effekt.

overflow

  • auto
  • hidden
  • scroll
  • overlay

white-space

  • nowrap
  • pre

Werte für text-overflow

Für die Eigenschaft text-overflow können die folgenden Werte angegeben werden.

  • clip (Standardwert, schneidet den Text ab)
  • ellipsis (Auslassungszeichen mit den drei Punkten)
  • <string> (Vom Entwickler vorgegebener String)

Es ist auch möglich, zwei Werte (links und rechts) anzugeben. Allerdings unterstützen das nicht alle Browser. Die Angabe eines selbst definierten Strings wird ebenfalls nicht von allen Browsern unterstützt. Der Opera 9 und 10 benötigt einen Browser-Präfix, sodass das Schlüsselwort mit -o-text-overflow angegeben wird. Nachfolgend sind einige Beispiel-Codes.

/* Text abschneiden */
.selektor1 {
width: 150px;
border: 1px solid #001055;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}

/* Auslassungspunkte */
.selektor2 {
width: 150px;
border: 1px solid #001055;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* Eigener String */
.selektor3 {
width: 150px;
border: 1px solid #001055;
white-space: nowrap;
overflow: hidden;
text-overflow: '---';
}

/* Zwei Werte */
.selektor4 {
width: 150px;
border: 1px solid #001055;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis ellipsis;
}
<div class="selektor1">Unpassender Text in einem DIV-Element</div>
<div class="selektor2">Unpassender Text in einem DIV-Element</div>
<div class="selektor3">Unpassender Text in einem DIV-Element</div>
<div class="selektor4">Unpassender Text in einem DIV-Element</div>

Bei den CSS-Beispielen wurden die Eigenschaften width und border angegeben, damit der Effekt sichtbar ist.