Svojstvo text-overflow

Svojstvo text-overflow dodaje tačkice na kraju skraćenog teksta kao znak da tekst nije stao u blok i bio je skraćen.

Da bi svojstvo radilo, tekst mora biti skraćen pomoću svojstva overflow ili svojstva overflow-x sa vrednošću hidden, auto ili scroll. Ako je postavljeno visible (a to je podrazumevana vrednost) - text-overflow neće raditi.

Sintaksa

selektor {
	text-overflow: ellipsis | clip;
}

Vrednosti

Vrednost	Opis
`ellipsis`	Dodaje tačkice na kraju skraćenog teksta.
`clip`	Ne dodaje tačkice na kraju (ovo je podrazumevana vrednost, koristi se za poništanje dejstva svojstva po potrebi).

Podrazumevana vrednost: clip.

Primer . Tekst koji izlazi

U ovom primeru veoma duga reč neće stati u kontejner i izaći će preko njegovih granica. Skraćivanja neće biti:

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

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

Primer . Dodajmo svojstvo overflow

Sada će sve što izađe preko granica kontejnera biti prosto odsečeno:

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

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

Primer . Vrednost ellipsis

Sada ćemo, pored svojstva overflow dodati i text-overflow sa vrednošću ellipsis. Skraćenom tekstu će se dodati tačkice na kraju:

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

Primer . Sa trakama za pomeranje (scroll bar)

Ako postavite overflow: auto i text-overflow: ellipsis, pojaviće se traka za pomeranje, ali će tačkice i dalje biti dodate. Pokušajte da pomaknete traku za pomeranje u primeru:

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

Primer . Ako nema veoma dugih reči

Ako nema toliko dugih reči da bi izašle preko granice kontejnera, onda skraćivanje neće biti izvršeno (ništa ne izlazi). Pogledajte sledeći primer:

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

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

Primer . Tekst u jednom redu

Međutim, postoje situacije kada želimo da tekst bude skraćen, ako je previše dugačak (tekst uopšte, a ne pojedinačne reči) i da se ne prelama u sledeći red. Ovo se postiže dodavanjem svojstva white-space sa vrednošću nowrap, koje zabranjuje prelamanje teksta u drugi red. Pogledajte primer, sada je tekst skraćen:

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

Primer . Širina u procentima

Ako postavite širinu bloka u %, skraćivanje će takođe raditi ispravno:

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

Pogledajte takođe

svojstva word-break i overflow-wrap,
koja omogućavaju prelamanje slova dugačke reči u novi red
svojstvo hyphens,
koje uključuje prelamanje reči po slogovima
svojstvo overflow,
koje odseca delove koji izlaze preko granice bloka