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

cssselector {
  text-overflow: ellipsis | clip;
}

Qiymatlar

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:

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

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

Результат:

Misol . Overflow xususiyatini qo‘shamiz

Hozir konteyner chegarasidan chiqib ketgan hamma narsa shunchaki kesiladi:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#elem {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Shuningdek qarang