text-overflow

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die text-overflow CSS-Eigenschaft legt fest, wie verborgener Überlaufinhalt den Benutzern signalisiert wird. Er kann abgeschnitten, als Auslassungszeichen (…) angezeigt oder mit einer benutzerdefinierten Zeichenfolge dargestellt werden.

Probieren Sie es aus

text-overflow: clip;

text-overflow: ellipsis;

text-overflow: "-";

text-overflow: "";

<section id="default-example">
  <div id="example-element-container">
    <p id="example-element">"Is there any tea on this spaceship?" he asked.</p>
  </div>
</section>

#example-element-container {
  width: 100%;
  max-width: 18em;
}

#example-element {
  line-height: 50px;
  border: 1px solid #c5c5c5;
  overflow: hidden;
  white-space: nowrap;
  font-family: sans-serif;
  padding: 0 0.5em;
  text-align: left;
}

Die text-overflow-Eigenschaft erzwingt keinen Überlauf. Um Text dazu zu bringen, den Container zu überlaufen, müssen Sie andere CSS-Eigenschaften festlegen: overflow und white-space. Zum Beispiel:

css

overflow: hidden;
white-space: nowrap;

Die text-overflow-Eigenschaft betrifft nur Inhalte, die in der inline Fortschrittsrichtung eines Block-Container-Elements überlaufen (nicht den Text, der am unteren Ende eines Kastens überläuft, zum Beispiel).

Syntax

css

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;

Die text-overflow-Eigenschaft kann mit einem oder zwei Werten angegeben werden. Wird ein Wert angegeben, legt er das Überlaufverhalten für das Ende der Zeile fest (das rechte Ende für von links nach rechts verlaufenden Text, das linke Ende für von rechts nach links verlaufenden Text). Werden zwei Werte angegeben, spezifiziert der erste das Überlaufverhalten für das linke Ende der Zeile und der zweite für das rechte Ende der Zeile. Die Eigenschaft akzeptiert entweder einen Schlüsselwortwert (clip oder ellipsis) oder einen <string>-Wert.

Werte

clip: Der Standardwert für diese Eigenschaft. Dieser Schlüsselwortwert schneidet den Text am Rand des Inhaltsbereichs ab, daher kann die Kürzung in der Mitte eines Zeichens stattfinden. Um am Übergang zwischen Zeichen abzuschneiden, können Sie text-overflow als leere Zeichenfolge angeben, falls dies in den Zielbrowsern unterstützt wird: text-overflow: '';.
ellipsis: Dieser Schlüsselwortwert zeigt ein Auslassungszeichen ('…', U+2026 HORIZONTAL ELLIPSIS) an, um den abgeschnittenen Text darzustellen. Das Auslassungszeichen wird innerhalb des Inhaltsbereichs angezeigt und verringert die Menge des angezeigten Textes. Wenn nicht genug Platz vorhanden ist, um das Auslassungszeichen anzuzeigen, wird es abgeschnitten.
<string>: Der <string>, der verwendet werden soll, um den abgeschnittenen Text darzustellen. Die Zeichenfolge wird innerhalb des Inhaltsbereichs angezeigt, wodurch die Größe des angezeigten Textes verkürzt wird. Wenn nicht genug Platz vorhanden ist, um die Zeichenfolge selbst anzuzeigen, wird sie abgeschnitten.

Formale Definition

Anfangswert	`clip`
Anwendbar auf	Blockcontainerelemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

text-overflow = 
  clip      |
  ellipsis

Beispiele

Ein-Wert-Syntax

Dieses Beispiel zeigt verschiedene Werte für text-overflow, die auf einen Absatz angewendet werden, sowohl für von links nach rechts als auch von rechts nach links verlaufenden Text.

HTML

html

<div class="ltr">
  <h2>Left to right text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

<div class="rtl">
  <h2>Right to left text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

CSS

css

p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /* Both of the following are required for text-overflow */
  white-space: nowrap;
  overflow: hidden;
}

.overflow-clip {
  text-overflow: clip;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.overflow-string {
  text-overflow: " [..]";
}

body {
  display: flex;
  justify-content: space-around;
}

.ltr > p {
  direction: ltr;
}

.rtl > p {
  direction: rtl;
}

Ergebnis

Zwei-Wert-Syntax

Dieses Beispiel zeigt die Zwei-Wert-Syntax für text-overflow, bei der Sie unterschiedliches Überlaufverhalten für den Anfang und das Ende des Textes definieren können. Um den Effekt zu zeigen, müssen wir die Zeile scrollen, sodass auch der Anfang der Zeile verborgen ist.

HTML

html

<pre>clip clip</pre>
<p class="overflow-clip-clip">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>clip ellipsis</pre>
<p class="overflow-clip-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>ellipsis ellipsis</pre>
<p class="overflow-ellipsis-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>ellipsis " [..]"</pre>
<p class="overflow-ellipsis-string">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>

CSS

css

p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /* Both of the following are required for text-overflow */
  white-space: nowrap;
  overflow: scroll;
}

.overflow-clip-clip {
  text-overflow: clip clip;
}

.overflow-clip-ellipsis {
  text-overflow: clip ellipsis;
}

.overflow-ellipsis-ellipsis {
  text-overflow: ellipsis ellipsis;
}

.overflow-ellipsis-string {
  text-overflow: ellipsis " [..]";
}

JavaScript

// Scroll each paragraph so the start is also hidden
const paras = document.querySelectorAll("p");

for (const para of paras) {
  para.scroll(100, 0);
}

Ergebnis

Spezifikationen

Specification
CSS Overflow Module Level 3 # text-overflow
Scalable Vector Graphics (SVG) 2 # TextOverflowProperty

Eine frühere Version dieser Schnittstelle erreichte den Status Candidate Recommendation. Da einige nicht als riskant eingestufte Merkmale entfernt werden mussten, wurde die Spezifikation auf das Niveau Working Draft zurückgestuft, was erklärt, warum Browser diese Eigenschaft ohne Präfix implementiert haben, obwohl sie nicht den CR-Status hatte.

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Verwandte CSS-Eigenschaften: overflow, white-space
CSS-Eigenschaften, die Zeilenumbrüche in Wörtern steuern: overflow-wrap, word-break