Teg wbr

Teg wbr brauzerga kerak bo'lganda (matn elementning kengligiga sig'masa) qatordan uzish joyini ko'rsatadi. Bunday uzishlar yumshoq deyiladi.

Yopuvchi teg talab qilmaydi.

Teg wbr orqali so'z uzilganda uzish belgisi "-" qo'shilmaydi. Agar u sizga kerak bo'lsa - yumshoq uzish belgisidan ­ foydalaning (nuqta-vergul oxirida majburiy, bu xato emas).

Yumshoq uzish ­ brauzerga kerak bo'lganda so'zni uzish joyini ko'rsatadi, bunda uzish belgisi "-" qo'yiladi.

Yumshoq uzishlar ­ ishlamaydi, agar hyphens xususiyati none qiymatida berilgan bo'lsa (lekin wbr uzishlari ishlaydi).

Misol . Uzishsiz matn

Keling, uzun so'zlar bor bo'lgan va blok chegarasidan chiqib ketadigan matn namunasiga qaraylik. Blokka kichik kenglik beramiz, shunda unda katta so'z sig'masligi kerak:

html<div id="elem">
  this is supersupersuperlong text
</div>
css#elem {
  width: 200px;
  border: 1px solid black;
}

Результат:

Misol . Teg wbr

Bu yerda, brauzerga kerak bo'lganda so'zni uzishni tavsiya qiladigan joylarga wbr tegi qo'shamiz (e'tibor bering, brauzer biz ko'rsatgan hamma joyda emas, faqat kerak bo'lganda uzadi):

html<div id="elem">
  this is super<wbr>super<wbr>super<wbr>long text
</div>
css#elem {
  width: 200px;
  border: 1px solid black;
}

Результат:

Misol . &shy; belgisi

Keling, wbr tegi o'rniga &shy; belgisini qo'yib ko'raylik. Uzish joylarida defislar ko'rinadi:

html<div id="elem">
  this is super­super­super­long text
</div>
css#elem {
  width: 200px;
  border: 1px solid black;
}

Результат:

Shuningdek qarang

  • teg br,
    ,
    yang qatorga uzadi
  • xususiyat hyphens,
    haqiqiy so'z uzishlarini belgilaydi
  • xususiyatlar word-break va overflow-wrap,
    uzun so'z harflarini uzishga imkon beradi
  • xususiyat overflow,
    blok chegarasidan chiqib ketayotgan qismlarni kesib tashlaydi