Text-overflow häsiýeti

text-overflow häsiýeti gysgalan tekstiň ahyryna, tekstiň bloka sygmandygy we gysgalandygyny bildirmek üçin, üç nokat goşýar.

Häsiýetiň işlemegi üçin tekst overflow ýa-da overflow-x häsiýetleri arkaly, hidden, auto ýa-da scroll bahasynda gysgalan bolmaly. visible (bokuça baha) girizilse - text-overflow işlemez.

Sintaksis

selektor {
	text-overflow: ellipsis | clip;
}

Bahalar

Baha	Düşündiriş
`ellipsis`	Gysgalan tekstiň ahyryna üç nokat goşýar.
`clip`	Ahyryna üç nokat goşmaýar (bokuça baha, zerurlyk ýüze çykanda häsiýetiň täsirini ýatyrmaq üçin ulanylýar).

Bokuça baha: clip.

Mysal . Çykýan tekst

Bu mysalda uzyn söz konteýnera sıgmas we onuň çäklerinden daşary çykar. Gysgalanma bolmaýar:

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

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

Mysal . Overflow häsiýetini goşalyň

Indi konteýneriň çäklerinden daşary çykan zadyň hemmesi ýöne gysgalanar:

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

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

Mysal . Ellipsis bahasy

Indi overflow häsiýetine goşmaça text-overflow häsiýetini, ellipsis bahasynda goşalyň. Gysgalan tekstiň ahyryna üç nokat goşular:

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

Mysal . Sürgüli zolaklar bilen

Eger overflow: auto we text-overflow: ellipsis girizilse, onda sürgüli zolak peýda bolar, ýöne üç nokat ýene-de goşular. Mysaldaky sürgüli zolagy synap görüň:

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

Mysal . Eger gaty uzyn sözler ýok bolsa

Eger konteýneriň çäklerinden daşary çykmak üçin ýeterlikde uzyn sözler ýok bolsa, onda gysgalanma bolmaz (çünki hiç zat daşary çykmaýar). Indiki mysala serediň:

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

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

Mysal . Bir setirli tekst

Şonda-da, tekst has uzyn bolsa (ýöne aýratyn sözler däl, tekst umumy), indiki setire geçmesin we gysgalansyn diýýän ýagdaýlar hem bolýar. Bu white-space häsiýetini nowrap bahasynda goşmak arkaly edilýär, bu tekstifiň beýleki setire geçmegini gadagan eder. Indi tekst gysgalanýar:

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

Mysal . Prosentdaky ini

Blokuň ini %-da girizilse, gysgalanma işjeň bolar:

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

Şeýle-de serediň

word-break we overflow-wrap häsiýetleri,
uzyn söziň harpyny täze setire geçirmäge rugsat berýär
hyphens häsiýeti,
sözleriň bogun boýunça geçmesini açýar
overflow häsiýeti,
blokuň çäginden daşary çykan bölekleri gysgýar