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 ⁨Juli 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. Es kann abgeschnitten, ein Auslassungszeichen (…) angezeigt oder eine benutzerdefinierte Zeichenkette angezeigt 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 über seinen Container hinausfließen zu lassen, müssen Sie andere CSS-Eigenschaften festlegen: overflow und white-space. Zum Beispiel:

css

overflow: hidden;
white-space: nowrap;

Die text-overflow-Eigenschaft wirkt sich nur auf Inhalte aus, die in ihrer inline Fortschrittsrichtung ein Block-Container-Element überlaufen (nicht auf Text, der am unteren Rand einer Box ü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. Wenn ein Wert angegeben wird, spezifiziert er das Überlaufverhalten für das Ende der Zeile (das rechte Ende für von links nach rechts verlaufenden Text, das linke Ende für von rechts nach links verlaufenden Text). Wenn zwei Werte angegeben werden, gibt der erste das Überlaufverhalten für das linke Ende der Zeile an, und der zweite spezifiziert es 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 an der Grenze des Inhaltsbereichs ab, daher kann das Kürzen mitten in einem Zeichen erfolgen. Um am Übergang zwischen Zeichen abzuschneiden, können Sie text-overflow als leere Zeichenfolge angeben, wenn das in Ihren Zielbrowsern unterstützt wird: text-overflow: '';.
ellipsis: Dieser Schlüsselwortwert wird ein Auslassungszeichen ('…', U+2026 HORIZONTAL ELLIPSIS) anzeigen, 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>: Die <string>, die verwendet werden soll, um den abgeschnittenen Text darzustellen. Die Zeichenkette wird innerhalb des Inhaltsbereichs angezeigt und verkürzt die Größe des angezeigten Textes. Wenn nicht genügend Platz vorhanden ist, um die Zeichenkette 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 | <string> | fade | <fade()> ]{1,2}  

<fade()> = 
  fade( [ <length-percentage> ] )  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Ein-Wert-Syntax

Dieses Beispiel zeigt verschiedene Werte für text-overflow, die auf einen Absatz angewendet werden, für von links nach rechts und 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 der Candidate Recommendation. Da einige nicht als risikobehaftet aufgeführte Funktionen entfernt werden mussten, wurde die Spezifikation auf den Working Draft-Status zurückgesetzt, was erklärt, warum Browser diese Eigenschaft ungekennzeichnet implementierten, obwohl sie nicht im CR-Zustand ist.

Browser-Kompatibilität

Siehe auch

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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden