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:
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
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
<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
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
<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
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