---
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>&lt;string&gt;</code> {{experimental_inline}}</a></dt>
 <dd><a href="/de/docs/Web/CSS/Boxmodell">Der </a>{{cssxref("&lt;string&gt;")}}<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>