Vlastnost text-overflow

Vlastnost text-overflow přidává trojtečku na konec zkráceného textu jako znak toho, že text se nevešel do bloku a byl zkrácen.

Pro fungování vlastnosti musí být text zkrácen pomocí vlastnosti overflow nebo vlastnosti overflow-x s hodnotou hidden, auto nebo scroll. Pokud je nastaveno visible (což je výchozí hodnota) - text-overflow nebude fungovat.

Syntaxe

selektor {
	text-overflow: ellipsis | clip;
}

Hodnoty

Hodnota	Popis
`ellipsis`	Přidá na konec zkráceného textu trojtečku.
`clip`	Nepřidá trojtečku na konec (toto je výchozí hodnota, slouží k zrušení účinku vlastnosti v případě potřeby).

Výchozí hodnota: clip.

Příklad . Text přesahující okraj

V tomto příkladu se velmi dlouhé slovo nevejde do kontejneru a přesáhne jeho hranice. Ke zkrácení nedochází:

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

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

Příklad . Přidáme vlastnost overflow

Nyní se vše, co přesahuje hranice kontejneru, jednoduše ořízne:

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

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

Příklad . Hodnota ellipsis

Nyní k vlastnosti overflow přidáme ještě text-overflow s hodnotou ellipsis. Ke zkrácenému textu se přidá trojtečka na konec:

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

Příklad . S posuvníky

Pokud nastavíte overflow: auto a text-overflow: ellipsis, objeví se posuvník, ale trojtečka bude stále přidána. Zkuste v příkladu posunout posuvník:

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

Příklad . Pokud nejsou velmi dlouhá slova

Pokud nejsou tak dlouhá slova, aby přesahovala hranici kontejneru, ke zkrácení nedojde (nic nepřesahuje). Podívejte se na následující příklad:

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

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

Příklad . Text na jeden řádek

Existují však situace, kdy chceme, aby se text zkrátil, pokud je příliš dlouhý (text jako celek, ne jednotlivá slova) a nepřeléval se na další řádek. Toho se dosáhne přidáním vlastnosti white-space s hodnotou nowrap, která zakáže přelévání textu na další řádek. Podívejte se na příklad, nyní se text zkracuje:

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

Příklad . Šířka v procentech

Pokud nastavíte šířku bloku v %, zkrácení bude také fungovat správně:

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

Viz také

vlastnosti word-break a overflow-wrap,
které umožňují přenést písmena dlouhého slova na nový řádek
vlastnost hyphens,
která zapíná dělení slov podle slabik
vlastnost overflow,
která ořezává části přesahující hranici bloku