CSS/Eigenschaften/Anzeige/text-overflow

Aus selfHTML
Zur Navigation springenZur Suche springen

Mit der Eigenschaft text-overflow können Sie auf abgeschnittenen Text hinweisen, z.B. durch Auslassungspunkte. text-overflow war ursprüngliche die zusammenfassende Eigenschaft von text-overflow-mode und text-overflow-ellipsis, die es jedoch nicht mehr gibt.

    {{#fornumargs:nr|name|{{#vardefine:class|}}{{#vardefine:classext|}}{{#vardefine:ext|-Extended}}
  • [[Datei:Iconset{{#var:ext}}.png|alt={{#explode:{{#var:classext|{{#var:class|leer+Leer}}}}|+|-1}}|{{#explode:{{#var:classext|{{#var:class|leer+Leer}}}}|+|-1}}]]
  • {{#vardefine:class}}{{#vardefine:classext}}}}

Details: caniuse.com


Folgende Angaben sind möglich:

  • clip, Text wird abgeschnitten (Standardwert)
  • ellipsis, "…" zeigen an, dass der Text weitergeht
  • 'string', eine Zeichenkette zeigt an, dass der Text weitergeht
  • initial, setzt es auf den Ausgangswert zurück
  • inherit, Einstellung des Elternelements wird übernommen

Anwendungsbeispiel

Beispiel {{#BeispielUrl:Beispiel:CSS3_text-overflow.html}}
pre + p {
  white-space: nowrap;
  overflow: hidden;
  /* anders ist gar kein überfließender Text möglich */
}

#nurso {
  text-overflow: clip; 
}
  
#punkte {
  text-overflow: ellipsis; 
}

#string {
  text-overflow: " bla bla bla"; 
}
<p>Dieser Text ist viel zu lang für den wenigen Platz hier. Also wird er abgeschnitten.</p> <pre>text-overflow: clip</pre> <p id="nurso">Dieser Text ist viel zu lang für den wenigen Platz hier.</p> <pre>text-overflow: ellipsis</pre> <p id="punkte">Dieser Text ist viel zu lang für den wenigen Platz hier.</p> <pre>text-overflow: " bla bla bla"</pre> <p id="string">Dieser Text ist viel zu lang für den wenigen Platz hier.</p>
Beachten Sie: text-overflow kann nur wirken, wenn die overflow-Eigenschaft des Containers den Wert hidden, scroll oder auto hat und zudem der automatische Zeilenumbruch durch white-space: nowrap; verboten wird.

Siehe auch

Weblinks