Vlastnosť text-overflow

Vlastnosť text-overflow pridáva trojbodku na koniec skráteného textu ako znak toho, že text sa nezmestil do bloku a bol skrátený.

Aby vlastnosť fungovala, text musí byť skrátený prostredníctvom vlastnosti overflow alebo vlastnosti overflow-x s hodnotou hidden, auto alebo scroll. Ak je nastavené visible (čo je základná hodnota) - text-overflow nebude fungovať.

Syntax

selektor {
	text-overflow: ellipsis | clip;
}

Hodnoty

Hodnota	Popis
`ellipsis`	Pridá na koniec skráteného textu trojbodku.
`clip`	Nepridáva trojbodku na koniec (toto je predvolená hodnota, slúži na zrušenie účinku vlastnosti v prípade potreby).

Predvolená hodnota: clip.

Príklad . Text prekračujúci okraje

V tomto príklade sa veľmi dlhé slovo nezmestí do kontajnera a prekročí jeho okraje. Ku skráteniu nedochádza:

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

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

Príklad . Pridajme vlastnosť overflow

Teraz sa všetko, čo prekročilo okraje kontajnera, jednoducho skráti:

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

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

Príklad . Hodnota ellipsis

Teraz okrem vlastnosti overflow pridáme aj text-overflow s hodnotou ellipsis. Skrátenému textu sa pridá trojbodka na koniec:

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

Príklad . S posuvníkmi

Ak nastavíte overflow: auto a text-overflow: ellipsis, objaví sa posuvník, ale trojbodka bude stále pridaná. Skúste posunúť posuvník v príklade:

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

Príklad . Ak nie sú veľmi dlhé slová

Ak nie sú také dlhé slová, aby prekračovali okraj kontajnera, ku skráteniu nedôjde (nič neprekračuje okraje). Pozrite si nasledujúci príklad:

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

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

Príklad . Text v jednom riadku

Avšak existujú situácie, keď chceme, aby sa text skrátil, ak je príliš dlhý (text ako celok, nie jednotlivé slová) a ne zalomal sa na ďalší riadok. To sa dosiahne pridaním vlastnosti white-space s hodnotou nowrap, ktorá zakáže zalomenie textu na ďalší riadok. Pozrite si príklad, teraz sa text skracuje:

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

Príklad . Šírka v percentách

Ak nastavíte šírku bloku v %, skrátenie bude tiež fungovať správne:

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

Pozri tiež

vlastnosti word-break a overflow-wrap,
ktoré umožňujú preniesť písmená dlhého slova na nový riadok
vlastnosť hyphens,
ktorá zapína delenie slov na slabiky
vlastnosť overflow,
ktorá skracuje časti prekračujúce okraj bloku