1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
|
---
title: text-overflow
slug: Web/CSS/text-overflow
tags:
- CSS
- CSS Eigenschaft
- NeedsLiveSample
- NeedsMobileBrowserCompatibility
- Referenz
translation_of: Web/CSS/text-overflow
---
<div>{{CSSRef}}</div>
<h2 id="Übersicht">Übersicht</h2>
<p>Die <strong><code>text-overflow</code></strong> <a href="/de/docs/Web/CSS">CSS</a> 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 ('<code>…</code>', <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) beziehungsweise eine vom Webautor definierte Zeichenfolge markiert sein.</p>
<p><img alt="text-overflow.png" class="default internal" src="/@api/deki/files/5846/=text-overflow.png"></p>
<p>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 (' ').</p>
<p>Diese Eigenschaft beeinflusst nur Inhalte, welche aus einem Blockelement in dessen <em>inline</em>-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 ‘<code class="css"><code>white-space:nowrap</code></code>’) oder wenn ein einzelnes Wort zu lang ist.</p>
<p>Diese CSS Eigenschaft erzwingt keinen Textüberlauf; um dies zu erreichen und somit die <code>text-overflow</code>-Eigenschaft anzuwenden, muss der Autor dem Element weitere Eigenschaften zuweisen, u. a. den {{cssxref("overflow")}} auf <code>hidden</code> setzen.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush: css">/* Ü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;
</pre>
<h3 id="Werte">Werte</h3>
<dl>
<dt><code>clip</code></dt>
<dd>Dieses Schlüsselwort führt dazu, dass Text genau am Ende des <a href="/de/docs/Web/CSS/Boxmodell">Inhaltsbereichs</a> abgeschnitten wird. Daher kann der Schnitt auch innerhalb eines Zeichens geschehen. Um am Übergang zwischen zwei Zeichen abzuschneiden, muss eine leere Zeichenfolge (<code>''</code>) verwendet werden. Der Wert <code>clip</code> ist der Standardwert für diese Eigenschaft.</dd>
<dt><code>ellipsis</code></dt>
<dd>Dieses Schlüsselwort führt dazu, dass ein Auslassungszeichen (<code>'…'</code>, <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) an der Schnittstelle angezeigt wird, um abgeschnittenen Text zu repräsentieren. Das Auslassungszeichen wird innerhalb des <a href="/de/docs/Web/CSS/Boxmodell">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.</a></dd>
<dt><a href="/de/docs/Web/CSS/Boxmodell"><code><string></code> {{experimental_inline}}</a></dt>
<dd><a href="/de/docs/Web/CSS/Boxmodell">Der </a>{{cssxref("<string>")}}<a href="/de/docs/Web/CSS/Boxmodell">, welcher zur Anzeige des abgeschnittenen Texts genutzt werden soll. Diese Zeichenfolge wird innerhalb des Inhaltsbereichs</a> 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.</dd>
</dl>
<h3 id="Formale_Syntax">Formale Syntax</h3>
{{csssyntax}}
<h2 id="Beispiele">Beispiele</h2>
<pre class="brush: css">p {
white-space: nowrap;
width: 100%;
overflow: hidden; /* "overflow"-Wert darf nicht "visible" sein */
text-overflow: ellipsis;
}
</pre>
<table class="standard-table">
<thead>
<tr>
<th colspan="1" rowspan="2" scope="col">CSS Wert</th>
<th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: ltr</code></th>
<th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: rtl</code></th>
</tr>
<tr>
<th scope="col">Erwartetes Ergebnis</th>
<th scope="col">Live-Ergebnis</th>
<th scope="col">Erwartetes Ergebnis</th>
<th scope="col">Live-Ergebnis</th>
</tr>
</thead>
<tbody>
<tr>
<td><em>visible overflow</em></td>
<td style="font-family: monospace;">1234567890</td>
<td style="direction: ltr;">
<div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
<td style="font-family: monospace;">0987654321</td>
<td>
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: clip</code></td>
<td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip.png" class="default internal" src="/@api/deki/files/6056/=t-o_clip.png"></td>
<td style="direction: ltr;">
<div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;">123456</div>
</td>
<td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip_rtl.png" class="default internal" src="/@api/deki/files/6057/=t-o_clip_rtl.png"></td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: ''</code></td>
<td style="font-family: monospace;">12345</td>
<td style="direction: ltr;">
<div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';">123456</div>
</td>
<td style="font-family: monospace;">54321</td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: ellipsis</code></td>
<td style="font-family: monospace;">1234…</td>
<td style="direction: ltr;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
<td style="font-family: monospace;">…4321</td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: '.'</code></td>
<td style="font-family: monospace;">1234.</td>
<td style="direction: ltr;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
<td style="font-family: monospace;">.4321</td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: clip clip</code></td>
<td style="font-family: monospace;">123456</td>
<td style="direction: ltr;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
<td style="font-family: monospace;">654321</td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: clip ellipsis</code></td>
<td style="font-family: monospace;">1234…</td>
<td style="direction: ltr;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
<td style="font-family: monospace;">6543…</td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: clip '.'</code></td>
<td style="font-family: monospace;">1234.</td>
<td style="direction: ltr;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
<td style="font-family: monospace;">6543.</td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: ellipsis clip</code></td>
<td style="font-family: monospace;">…3456</td>
<td style="direction: ltr;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
<td style="font-family: monospace;">…4321</td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: ellipsis ellipsis</code></td>
<td style="font-family: monospace;">…34…</td>
<td style="direction: ltr;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
<td style="font-family: monospace;">…43…</td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: ellipsis '.'</code></td>
<td style="font-family: monospace;">…34.</td>
<td style="direction: ltr;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
<td style="font-family: monospace;">…43.</td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: ',' clip</code></td>
<td style="font-family: monospace;">,3456</td>
<td style="direction: ltr;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
<td style="font-family: monospace;">,4321</td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: ',' ellipsis</code></td>
<td style="font-family: monospace;">,34…</td>
<td style="direction: ltr;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
<td style="font-family: monospace;">,43…</td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: ',' '.'</code></td>
<td style="font-family: monospace;">,34.</td>
<td style="direction: ltr;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
<td style="font-family: monospace;">,53.</td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
</td>
</tr>
</tbody>
</table>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 UI', '#text-overflow', 'text-overflow')}}</td>
<td>{{Spec2('CSS3 UI')}}</td>
<td>Ursprüngliche Definition</td>
</tr>
</tbody>
</table>
<p>Eine vorherige Version dieser Schnittstelle erreichte den <em>Candidate Recommendation</em>-Status (CR). Da einige der nicht aufgeführten gefährdeten Eigenschaften entfernt werden mussten, wurde die Spezifikation auf <em>Working Draft</em>-Niveau herabgesetzt. Das erklärt, weshalb Browser diese Eigenschaft ohne Präfix, jedoch nicht im CR-Zustand, umgesetzt haben. Momentan hat die Spezifikation das <em>Editor's Draft</em>-Niveau erreicht.</p>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
{{Compat("css.properties.text-overflow")}}
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>Verwandte CSS Eigenschaften: {{cssxref("overflow")}}, {{cssxref("white-space")}}</li>
</ul>
|
