Xüsusiyyət text-overflow

text-overflow xüsusiyyəti mətnin blokda sığmaması və kəsilməsi əlaməti olaraq kəsilmış mətnin sonuna üç nöqtə əlavə edir.

Xüsusiyyətin işləməsi üçün mətn overflow və ya overflow-x xüsusiyyətləri ilə hidden, auto və ya scroll qiymətlərində kəsilməlidir. Əgər visible təyin edilibsə (standart vəziyyətdə belədir) - text-overflow işləməyəcək.

Sintaksis

selektor {
	text-overflow: ellipsis | clip;
}

Qiymətlər

Qiymət	Təsvir
`ellipsis`	Kəsilmış mətnin sonuna üç nöqtə əlavə edir.
`clip`	Sonuna üç nöqtə əlavə etmir (standart qiymətdir, lazım olduqda xüsusiyyətin təsirini ləğv etmək üçün istifadə olunur).

Standart qiymət: clip.

Nümunə . Həddi aşan mətn

Bu nümunədə çox uzun söz konteynerdə sığmayacaq və onun sərhədlərindən kənara çıxacaq. Heç bir kəsmə baş vermir:

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

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

Nümunə . Overflow xüsusiyyətini əlavə edək

İndi konteynerin sərhədlərindən kənara çıxan hər şey sadəcə kəsiləcək:

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

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

Nümunə . Ellipsis qiyməti

İndi overflow xüsusiyyətinə əlavə olaraq text-overflow xüsusiyyətini də ellipsis qiymətində əlavə edirik. Kəsilmış mətmin sonuna üç nöqtə əlavə olunacaq:

<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ümunə . Sürüşdürmə zolaqları ilə

Əgər overflow: auto və text-overflow: ellipsis təyin etsəniz, sürüşdürmə zolağı peyda olacaq, amma üç nöqtə yenə də əlavə olunacaq. Nümunədə sürüşdürmə zolağını sürüşdürməyə cəhd edin:

<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ümunə . Əgər çox uzun sözlər yoxdursa

Əgər konteynerin sərhədlərindən kənara çıxacaq qədər uzun sözlər yoxdursa, heç bir kəsmə baş verməyəcək (heç nə kənara çıxmır). Aşağıdakı nümunəyə baxın:

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

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

Nümunə . Bir sətirdə mətn

Lakin, elə hallar olur ki, mətn çox uzun olduqda kəsilsin (ayrı-ayrı sözlər deyil, ümumi mətn) və növbəti sətirə keçməsin. Bu, white-space xüsusiyyətini nowrap qiymətində əlavə etməklə həll olunur, bu mətmin digər sətirə keçməsini qadağan edir. Nümunəyə baxın, indi mətn kəsilir:

<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ümunə . Faizlə eni

Əgər blokun enini % ilə təyin etsəniz, kəsmə yenə də düzgün işləyəcək:

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

Həmçinin bax

word-break və overflow-wrap xüsusiyyətləri,
uzun sözün hərflərinin yeni sətirə keçməsinə imkan verir
hyphens xüsusiyyəti,
sözlərin hecalara görə kəsilməsini aktivləşdirir
overflow xüsusiyyəti,
blokun sərhəddindən kənara çıxan hissələri kəsir