text-overflow
Misol
text-overflow xususiyatidan foydalanish:
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
text-overflow xususiyati toshib chiqqan va ko‘rsatilmayotgan kontent haqida foydalanuvchiga qanday ishora qilinishini belgilaydi. Kontent qirqilishi, ko‘p nuqta (...) yoki maxsus string ko‘rsatilishi mumkin.
text-overflow uchun quyidagi ikkala xususiyat ham talab qilinadi:
- white-space: nowrap;
- overflow: hidden;
| Standart qiymat: | clip |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.textOverflow="ellipsis" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| text-overflow | 4 | 6 | 7 | 3.1 | 11 |
CSS sintaksisi
text-overflow: clip|ellipsis|string|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| clip | Standart qiymat. Matn qirqiladi va unga kirish imkoni bo‘lmaydi | Demo ❯ |
| ellipsis | Qirqilgan matnni ifodalash uchun ko‘p nuqta ("...") chiqaradi | Demo ❯ |
| string | Qirqilgan matnni ifodalash uchun berilgan stringni chiqaradi | |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
Hover effektli text-overflow (sichqoncha ustiga olib borilganda butun matnni ko‘rsatish):
div.a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.a:hover {
overflow: visible;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS matn effektlari
HTML DOM ma’lumotnomasi: textOverflow xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!