Omadus text-overflow

Omadus text-overflow lisab lõigatud teksti lõppu kolme punkti märgina sellest, et tekst ei mahtunud plokki ja see lõigati.

Omaduse toimimiseks peab tekst olema lõigatud läbi omaduse overflow või omaduse overflow-x väärtusel hidden, auto või scroll. Kui on määratud visible (ja nii see on vaikimisi) - siis text-overflow ei toimi.

Süntaks

selektor {
	text-overflow: ellipsis | clip;
}

Väärtused

Väärtus	Kirjeldus
`ellipsis`	Lisab lõigatud teksti lõppu kolme punkti.
`clip`	Ei lisa kolme punkti lõppu (see on vaikeväärtus, vajalik omaduse toimingu tühistamiseks vajadusel).

Vaikeväärtus: clip.

Näide . Väljaulatu tekst

Selles näites väga pikk sõna ei mahu konteinerisse ja ulatub välja selle piiridest. Lõikamist ei toimu:

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

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

Näide . Lisame omaduse overflow

Nüüd kõik, mis ulatub välja konteineri piiridest, lihtsalt lõigatakse:

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

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

Näide . Väärtus ellipsis

Nüüd lisaks omadusele overflow lisame ka text-overflow väärtusel ellipsis. Lõigatud tekstile lisatakse kolme punkti lõppu:

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

Näide . Kerimisribadega

Kui määrata overflow: auto ja text-overflow: ellipsis, siis kuvatakse kerimisriba, kuid kolme punkti lisatakse endiselt. Proovige näites kerimisriba kerida:

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

Näide . Kui pole väga pikki sõnu

Kui pole nii pikki sõnu, et need ulatuksid välja konteineri piiridest, siis lõikamist ei toimu (midagi ju ei ule piire). Vaadake järgmist näidet:

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

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

Näide . Tekst ühel real

Siiski on olukordi, kus me tahame, et tekst lõigataks, kui see on liiga pikk (tekst üldiselt, mitte üksikud sõnad) ja ei peaks kanduma järgmisele reale. Seda tehakse lisades omadust white-space väärtusel nowrap, mis keelab teksti kandmise teisele reale. Vaadake näidet, nüüd tekst lõigatakse:

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

Näide . Laius protsentides

Kui määrata ploki laius %-des, siis lõikamine toimib samuti korrektselt:

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

Vaata ka

omadused word-break ja overflow-wrap,
mis võimaldavad pika sõna tähti uuele reale kanda
omadus hyphens,
mis lubab sõnade poolitamist silpide kaupa
omadus overflow,
mis lõikab ploki piiridest väljaulatuvad osad