Właściwość text-overflow

Właściwość text-overflow dodaje wielokropek na końcu przyciętego tekstu na znak, że tekst nie mieścił się w bloku i został przycięty.

Aby właściwość działała, tekst musi być przycięty za pomocą właściwości overflow lub właściwości overflow-x z wartością hidden, auto lub scroll. Jeśli ustawione jest visible (a tak jest domyślnie) - text-overflow nie będzie działać.

Składnia

selektor {
	text-overflow: ellipsis | clip;
}

Wartości

Wartość	Opis
`ellipsis`	Dodaje na końcu przyciętego tekstu wielokropek.
`clip`	Nie dodaje wielokropka na końcu (jest to wartość domyślna, służy do anulowania działania właściwości w razie potrzeby).

Wartość domyślna: clip.

Przykład . Tekst wystający

W tym przykładzie bardzo długie słowo nie zmieści się w kontenerze i wystanie poza jego granice. Przycięcia nie następuje:

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

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

Przykład . Dodajmy właściwość overflow

Teraz wszystko, co wystaje poza granice kontenera, po prostu się przyetnie:

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

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

Przykład . Wartość ellipsis

Teraz oprócz właściwości overflow dodamy jeszcze text-overflow z wartością ellipsis. Przyciętemu tekstowi doda się wielokropek na końcu:

<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;
}

Przykład . Z paskami przewijania

Jeśli ustawić overflow: auto i text-overflow: ellipsis, to pojawi się pasek przewijania, ale wielokropek nadal będzie dodany. Spróbuj przewinąć pasek przewijania w przykładzie:

<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;
}

Przykład . Jeśli nie ma bardzo długich słów

Jeśli nie ma na tyle długich słów, aby wystawały poza granicę kontenera, to przycięcia nie nastąpi (nic nie wystaje). Spójrz na następujący przykład:

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

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

Przykład . Tekst w jednej linii

Jednak zdarzają się sytuacje, gdy chcemy, aby tekst był przycinany, jeśli jest zbyt długi (tekst w ogóle, a nie pojedyncze słowa) i nie był przenoszony do następnej linii. Robi się to poprzez dodanie właściwości white-space z wartością nowrap, która zabroni przenoszenia tekstu do innej linii. Spójrz na przykład, teraz tekst jest przycinany:

<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;
}

Przykład . Szerokość w procentach

Jeśli ustawić szerokość bloku w %, to przycinanie również będzie działać poprawnie:

<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;
}

Zobacz też

właściwości word-break i overflow-wrap,
które pozwalają przenieść litery długiego słowa do nowej linii
właściwość hyphens,
która włącza dzielenie wyrazów na sylaby
właściwość overflow,
która przycina części wystające poza granicę bloku