CSS text-overflow-Eigenschaft

Die CSS text-overflow-Eigenschaft legt fest, wie dem Benutzer überlaufender Inline-Text angezeigt werden soll. Sie ist eine der CSS3-Eigenschaften.

Die text-overflow-Eigenschaft wird häufig in Kombination mit der overflow-Eigenschaft auf hidden und white-space auf nowrap verwendet, kann aber je nach Layout-Kontext auch mit anderen Werten funktionieren.

In CSS3 erlaubt die Spezifikation die Verwendung eines benutzerdefinierten Strings. Ein String-Wert kann Leerzeichen enthalten, oder Sie können einen anderen benutzerdefinierten String verwenden. In älteren Versionen der Spezifikation wurde erwähnt, dass eine URL zu einem Bild für die Auslassungspunkte verwendet werden könnte, dies wurde jedoch verworfen.

Startwert	clip
Gilt für	Block-Container-Elemente.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.textOverflow = "ellipsis";

Syntax

CSS text-overflow-Werte

css

text-overflow: clip | ellipsis | string | initial | inherit;

Beispiel für die text-overflow-Eigenschaft:

CSS text-overflow-Codebeispiel

html

<!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>

Try it Yourself »

Ergebnis

CSS text-overflow with clip, ellipsis values

Beispiel für die text-overflow-Eigenschaft mit den Werten „clip“, „ellipsis“ und „initial“:

CSS text-overflow-Beispiel für die Werte clip und ellipsis

html

<!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>

Try it Yourself »

Werte

Wert	Beschreibung	Testen
`clip`	Schneidet den Text am Rand des Inhaltsbereichs ab; die Abschneidung kann mitten in einem Zeichen erfolgen. Dies ist der Standardwert.	Testen »
`ellipsis`	Gibt einen Auslassungspunkt („…“) aus, um den abgeschnittenen Text anzuzeigen. Hinweis: Dies funktioniert nur bei einzeiligem Text.	Testen »
`<string>`	Gibt den angegebenen String aus, um den abgeschnittenen Text darzustellen. Der String wird innerhalb des Inhaltsbereichs angezeigt. Hinweis: Eingeschränkte Unterstützung in älteren Browsern.	Testen »
`initial`	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.	Testen »
`inherit`	Erbt die Eigenschaft von ihrem übergeordneten Element.

Praxis

Die text-overflow-Eigenschaft funktioniert, wenn

die overflow-Eigenschaft auf "hidden" gesetzt ist und white-space auf "normal".die overflow-Eigenschaft auf "visible" gesetzt ist und white-space auf "nowrap".die overflow-Eigenschaft auf "hidden" gesetzt ist und white-space auf "nowrap".die overflow-Eigenschaft auf "visible" gesetzt ist und white-space auf "normal".

CSS text-overflow-Eigenschaft ​

Syntax ​

Beispiel für die text-overflow-Eigenschaft: ​

Ergebnis ​

Beispiel für die text-overflow-Eigenschaft mit den Werten „clip“, „ellipsis“ und „initial“: ​

Werte ​