From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/text-overflow/index.html | 274 ++++++++++++++++++++++++++++++ 1 file changed, 274 insertions(+) create mode 100644 files/de/web/css/text-overflow/index.html (limited to 'files/de/web/css/text-overflow') diff --git a/files/de/web/css/text-overflow/index.html b/files/de/web/css/text-overflow/index.html new file mode 100644 index 0000000000..c513eca823 --- /dev/null +++ b/files/de/web/css/text-overflow/index.html @@ -0,0 +1,274 @@ +--- +title: text-overflow +slug: Web/CSS/text-overflow +tags: + - CSS + - CSS Eigenschaft + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/text-overflow +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die text-overflow CSS Eigenschaft bestimmt, wie überlaufende Inhalte die nicht angezeigt werden (Siehe {{cssxref("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 {{cssxref("overflow")}} auf hidden setzen.

+ +

{{cssinfo}}

+ +

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> {{experimental_inline}}
+
Der {{cssxref("<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

+ +
{{csssyntax}}
+ +

Beispiele

+ +
p {
+  white-space: nowrap;
+  width: 100%;
+  overflow: hidden;              /* "overflow"-Wert darf nicht "visible" sein */
+
+  text-overflow: ellipsis;
+}
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSS Wertdirection: ltrdirection: rtl
Erwartetes ErgebnisLive-ErgebnisErwartetes ErgebnisLive-Ergebnis
visible overflow1234567890 +
1234567890
+ 		0987654321 +
1234567890
+
text-overflow: clipt-o_clip.png +
123456
+ 		t-o_clip_rtl.png +
1234567890
+
text-overflow: ''12345 +
123456
+ 		54321 +
1234567890
+
text-overflow: ellipsis1234… +
1234567890
+ 		…4321 +
1234567890
+
text-overflow: '.'1234. +
1234567890
+ 		.4321 +
1234567890
+
text-overflow: clip clip123456 +
1234567890
+ 		654321 +
1234567890
+
text-overflow: clip ellipsis1234… +
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

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 UI', '#text-overflow', 'text-overflow')}}{{Spec2('CSS3 UI')}}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

+ +{{Compat("css.properties.text-overflow")}} + +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf