Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Übersicht

Die text-overflow CSS Eigenschaft bestimmt, wie überlaufende Inhalte die nicht angezeigt werden (Siehe overflow) dem Nutzer signalisiert werden. Sie können abgeschnitten (clipped) oder durch ein Auslassungszeichen ('', U+2026 Horizontal Ellipsis) beziehungsweise eine vom Webautor definierte Zeichenfolge markiert sein.

text-overflow.png

Das Abschneiden des überlaufenden Textes findet exakt am Rand des Inhaltselements statt. Um erst nach einem vollen Zeichen abzuschneiden, kann eine leere benutzerdefinierte Zeichenfolge angegeben werden (' ').

Diese Eigenschaft beeinflusst nur Inhalte, welche aus einem Blockelement in dessen inline-Richtung überlaufen (beispielsweise wird Text der am unteren Ende eines Kastens überläuft nicht beeinflusst). Ein Textüberlauf kann auftreten, wenn ein Text-wrapping verhindert wird (z.B., durch ‘white-space:nowrap’) oder wenn ein einzelnes Wort zu lang ist.

Diese CSS Eigenschaft erzwingt keinen Textüberlauf; um dies zu erreichen und somit die text-overflow-Eigenschaft anzuwenden, muss der Autor dem Element weitere Eigenschaften zuweisen, u. a. den overflow auf hidden setzen.

Initialwertclip
Anwendbar aufBlockcontainerelemente
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Überlaufverhalten am Zeilenende
   Rechtes Ende, falls links nach rechts, linkes Ende, falls rechts nach links */
text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "…";

/* Überlaufverhalten am linken/rechten Ende
   Richtung hat keinen Einfluss */
text-overflow: clip ellipsis;
text-overflow: "…" "…";

/* Globale Werte */
text-overflow: inherit;
text-overflow: initial;
text-overflow: unset;

Werte

clip
Dieses Schlüsselwort führt dazu, dass Text genau am Ende des Inhaltsbereichs abgeschnitten wird. Daher kann der Schnitt auch innerhalb eines Zeichens geschehen. Um am Übergang zwischen zwei Zeichen abzuschneiden, muss eine leere Zeichenfolge ('') verwendet werden. Der Wert clip ist der Standardwert für diese Eigenschaft.
ellipsis
Dieses Schlüsselwort führt dazu, dass ein Auslassungszeichen ('…', U+2026 Horizontal Ellipsis) an der Schnittstelle angezeigt wird, um abgeschnittenen Text zu repräsentieren. Das Auslassungszeichen wird innerhalb des Inhaltsbereichs angezeigt, wodurch die Menge des angezeigten Texts verringert wird. Wenn nicht genug Platz für das Auslassungszeichen selbst zur Verfügung steht, wird es abgeschnitten.
<string>
Der <string>, welcher zur Anzeige des abgeschnittenen Texts genutzt werden soll. Diese Zeichenfolge wird innerhalb des Inhaltsbereichs angezeigt und führt dazu, dass die Menge des angezeigten Texts verringert wird. Wenn nicht genug Platz für die Zeichenfolge selbst zur Verfügung steht, wird sie abgeschnitten.

Formale Syntax

[ clip | ellipsis | <string> ]{1,2}

Beispiele

p {
  white-space: nowrap;
  width: 100%;                   
  overflow: hidden;              /* "overflow"-Wert darf nicht "visible" sein */ 

  text-overflow: ellipsis;
}
CSS Wert direction: ltr direction: rtl
Erwartetes Ergebnis Live-Ergebnis Erwartetes Ergebnis Live-Ergebnis
visible overflow 1234567890
1234567890
0987654321
1234567890
text-overflow: clip t-o_clip.png
123456
t-o_clip_rtl.png
1234567890
text-overflow: '' 12345
123456
54321
1234567890
text-overflow: ellipsis 1234…
1234567890
…4321
1234567890
text-overflow: '.' 1234.
1234567890
.4321
1234567890
text-overflow: clip clip 123456
1234567890
654321
1234567890
text-overflow: clip ellipsis 1234…
1234567890
6543…
1234567890
text-overflow: clip '.' 1234.
1234567890
6543.
1234567890
text-overflow: ellipsis clip …3456
1234567890
…4321
1234567890
text-overflow: ellipsis ellipsis …34…
1234567890
…43…
1234567890
text-overflow: ellipsis '.' …34.
1234567890
…43.
1234567890
text-overflow: ',' clip ,3456
1234567890
,4321
1234567890
text-overflow: ',' ellipsis ,34…
1234567890
,43…
1234567890
text-overflow: ',' '.' ,34.
1234567890
,53.
1234567890

Spezifikationen

Spezifikation Status Kommentar
CSS Basic User Interface Module Level 3
Die Definition von 'text-overflow' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Eine vorherige Version dieser Schnittstelle erreichte den Candidate Recommendation-Status (CR). Da einige der nicht aufgeführten gefährdeten Eigenschaften entfernt werden mussten, wurde die Spezifikation auf Working Draft-Niveau herabgesetzt. Das erklärt, weshalb Browser diese Eigenschaft ohne Präfix, jedoch nicht im CR-Zustand, umgesetzt haben. Momentan hat die Spezifikation das Editor's Draft-Niveau erreicht.

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 7
Hinweise
Vollständige Unterstützung 7
Hinweise
Hinweise Until Firefox 10, handling of text-overflow on blocks with inline overflow on both horizontal sides was incorrect. Before Firefox 10, if only one value was specified (such as text-overflow: ellipsis;), text was ellipsed on both sides of the block, instead of only the end edge based on the block's text direction.
IE Vollständige Unterstützung 6
Vollständige Unterstützung 6
Vollständige Unterstützung 8
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -ms-
Opera Vollständige Unterstützung 11
Vollständige Unterstützung 11
Vollständige Unterstützung 9
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -o-
Safari Vollständige Unterstützung 1.3WebView Android Vollständige Unterstützung JaChrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 7
Hinweise
Vollständige Unterstützung 7
Hinweise
Hinweise Until Firefox 10, handling of text-overflow on blocks with inline overflow on both horizontal sides was incorrect. Before Firefox 10, if only one value was specified (such as text-overflow: ellipsis;), text was ellipsed on both sides of the block, instead of only the end edge based on the block's text direction.
Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android ?
Two-value syntax
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 9IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 9Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
<string>
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 9IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 9Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
fade
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
fade()
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, Glogau, Guillaume-Heras, Sebastianz, DavidArndt
Zuletzt aktualisiert von: SJW,