text-overflow xususiyati

text-overflow xususiyati kesilgan matn oxiriga uch nuqta qo‘shadi, bu matn blokka sig‘maganligi va kesilganligini bildiradi.

Xususiyatning ishlashi uchun matn overflow yoki overflow-x xususiyatlari orqali hidden, auto yoki scroll qiymatlarida kesilgan bo‘lishi kerak. Agar visible belgilangan bo‘lsa (standart holatda shunday) - text-overflow ishlamaydi.

Sintaksis

selector {
	text-overflow: ellipsis | clip;
}

Qiymatlar

Qiymat	Tavsif
`ellipsis`	Kesilgan matn oxiriga uch nuqta qo‘shadi.
`clip`	Oxiriga uch nuqta qo‘shmaydi (standart qiymat, kerak bo‘lganda xususiyatni bekor qilish uchun ishlatiladi).

Standart qiymat: clip.

Misol . Chetdan chiqib ketgan matn

Ushbu misolda juda uzun so‘z konteynerga sig‘maydi va uning chegarasidan chiqib ketadi. Kesish amalga oshmaydi:

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

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

Misol . Overflow xususiyatini qo‘shamiz

Hozir konteyner chegarasidan chiqib ketgan hamma narsa shunchaki kesiladi:

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

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

Misol . Ellipsis qiymati

Hozir overflow xususiyatiga qo‘shimcha ravishda text-overflow xususiyatini ellipsis qiymatida qo‘shamiz. Kesilgan matn oxiriga uch nuqta qo‘shiladi:

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

Misol . Aylanadigan panel bilan

Agar overflow: auto va text-overflow: ellipsis belgilansa, aylanadigan panel paydo bo‘ladi, lekin uch nuqta baribir qo‘shiladi. Misdagi aylanadigan panelni aylantirib ko‘ring:

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

Misol . Agar juda uzun so‘zlar bo‘lmasa

Agar konteyner chegarasidan chiqadigan darajada uzun so‘zlar bo‘lmasa, kesish amalga oshmaydi (hech narsa chiqib ketmayapti). Quyidagi misolni ko‘ring:

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

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

Misol . Bitta qatordagi matn

Biroq, vaziyatlar bo‘ladi, biz matn juda uzun bo‘lsa (alohida so‘zlar emas, balki butun matn) kesilishini va keyingi qatorga o‘tmasligini xohlaymiz. Buning uchun white-space xususiyati nowrap qiymatida qo‘shiladi, bu matnning boshqa qatorga o‘tishini taqiqlaydi. Misolni ko‘ring, endi matn kesiladi:

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

Misol . Foizdagi kenglik

Agar blok kengligi % da belgilansa, kesish ham to‘g‘ri ishlaydi:

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

Shuningdek qarang

word-break va overflow-wrap xususiyatlari,
uzun so‘z harflarini yangi qatorga o‘tkazishga imkon beradi
hyphens xususiyati,
so‘zlarni bo‘g‘inlarga ajratib o‘tkazishni yoqadi
overflow xususiyati,
blok chegarasidan chiqib ketgan qismlarni kesadi