diff options
Diffstat (limited to 'files/de/web/css/text-overflow/index.html')
| -rw-r--r-- | files/de/web/css/text-overflow/index.html | 274 |
1 files changed, 274 insertions, 0 deletions
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 +--- +<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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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> |