Lastnost text-overflow

Lastnost text-overflow doda tripičje na konec okrnjenega besedila v znak, da se besedilo ni umestilo v blok in je bilo okrnjeno.

Za delovanje lastnosti mora biti besedilo okrnjeno prek lastnosti overflow ali lastnosti overflow-x v vrednosti hidden, auto ali scroll. Če je nastavljeno visible (kar je privzeto) - text-overflow ne bo delovala.

Sintaksa

selektor {
	text-overflow: ellipsis | clip;
}

Vrednosti

Vrednost	Opis
`ellipsis`	Doda na konec okrnjenega besedila tripičje.
`clip`	Ne doda tripičja na konec (to je privzeta vrednost, potrebna za preklic delovanja lastnosti po potrebi).

Privzeta vrednost: clip.

Primer . Besedilo, ki štrli ven

V tem primeru se zelo dolga beseda ne bo umestila v vsebnik in bo štrlela preko njegovih meja. Do okrnitve ne pride:

<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 lastnost overflow

Trenutno se bo vse, kar štrli preko meja vsebnika, preprosto odrezalo:

<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

Trenutno bomo poleg lastnosti overflow dodali še text-overflow v vrednosti ellipsis. Okrnjenemu besedilu se bo dodalo tripičje na koncu:

<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 . Z drsnimi trakovi

Če nastavimo overflow: auto in text-overflow: ellipsis, se bo pojavil drsni trak, vendar bo tripičje še vedno dodano. Poskusite pomikati drsni trak v 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 . Če ni zelo dolgih besed

Če ni tako dolgih besed, da bi štrlele preko meja vsebnika, do okrnitve ne bo prišlo (nič ne štrli ven). Oglejte si naslednji 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 . Besedilo v eno vrstico

Vendar pa obstajajo situacije, ko želimo, da se besedilo okrajša, če je preveč dolgo (besedilo na splošno, ne posamezne besede) in se ne prelomi v naslednjo vrstico. To naredimo z dodajanjem lastnosti white-space v vrednosti nowrap, ki prepove prelamljanje besedila v drugo vrstico. Oglejte si primer, zdaj se besedilo okrajša:

<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 v odstotkih

Če nastavimo širino bloka v %, bo okrajšanje prav tako delovalo pravilno:

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

Glejte tudi

lastnosti word-break in overflow-wrap,
ki omogočata prelom črk dolge besede v novo vrstico
lastnost hyphens,
ki vklopi prelome besed po zlogih
lastnost overflow,
ki okrajša dele, ki štrlijo preko meja bloka