Eigenschaft text-overflow

Die Eigenschaft text-overflow fügt am Ende des abgeschnittenen Textes eine Auslassungspunkte hinzu, um anzuzeigen, dass der Text nicht in den Block passte und abgeschnitten wurde.

Damit die Eigenschaft funktioniert, muss der Text durch die Eigenschaft overflow oder die Eigenschaft overflow-x mit dem Wert hidden, auto oder scroll abgeschnitten werden. Wenn visible eingestellt ist (was standardmäßig der Fall ist) - wird text-overflow nicht funktionieren.

Syntax

Selektor {
	text-overflow: ellipsis | clip;
}

Werte

Wert	Beschreibung
`ellipsis`	Fügt am Ende des abgeschnittenen Textes eine Auslassungspunkte hinzu.
`clip`	Fügt keine Auslassungspunkte hinzu (dies ist der Standardwert, wird benötigt, um die Wirkung der Eigenschaft bei Bedarf aufzuheben).

Standardwert: clip.

Beispiel . Überlaufender Text

In diesem Beispiel passt das sehr lange Wort nicht in den Container und wird über dessen Grenzen hinausragen. Es findet kein Abschneiden statt:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: visible;
	border: 1px solid red;
}

Beispiel . Wir fügen die Eigenschaft overflow hinzu

Jetzt wird alles, was über die Containergrenzen hinausragt, einfach abgeschnitten:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	border: 1px solid red;
}

Beispiel . Wert ellipsis

Jetzt fügen wir zusätzlich zur Eigenschaft overflow auch text-overflow mit dem Wert ellipsis hinzu. Dem abgeschnittenen Text werden Auslassungspunkte am Ende hinzugefügt:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Beispiel . Mit Scrollbalken

Wenn man overflow: auto und text-overflow: ellipsis setzt, erscheint ein Scrollbalken, aber die Auslassungspunkte werden weiterhin hinzugefügt. Versuchen Sie, im Beispiel den Scrollbalken zu bewegen:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Beispiel . Wenn es keine sehr langen Wörter gibt

Wenn es keine so langen Wörter gibt, dass sie über die Containergrenze hinausragen, findet kein Abschneiden statt (es ragt ja nichts heraus). Sehen Sie sich das folgende Beispiel an:

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Beispiel . Text in einer Zeile

Es gibt jedoch Situationen, in denen wir möchten, dass der Text abgeschnitten wird, wenn er zu lang ist (der Text insgesamt, nicht einzelne Wörter) und nicht in die nächste Zeile umbricht. Dies wird erreicht durch Hinzufügen der Eigenschaft white-space mit dem Wert nowrap, was den Textumbruch auf eine andere Zeile verbietet. Sehen Sie sich das Beispiel an, jetzt wird der Text abgeschnitten:

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Beispiel . Breite in Prozent

Wenn die Blockbreite in % angegeben wird, funktioniert das Abschneiden auch korrekt:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 80%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Siehe auch

die Eigenschaften word-break und overflow-wrap,
die es erlauben, die Buchstaben eines langen Wortes in eine neue Zeile umzubrechen
die Eigenschaft hyphens,
die Silbentrennung aktiviert
die Eigenschaft overflow,
die über die Blockgrenze hinausragende Teile abschneidet