Overflow-wrap xususiyati
overflow-wrap xususiyati
uzun so‘zning harflarini yangi qatorga ko‘chirishga imkon beradi,
agar bu so‘z konteyner eniga sig‘masa.
Sintaksis
selektor {
overflow-wrap: break-word | normal;
}
Qiymatlar
| Qiymat | Tavsif |
|---|---|
break-word |
Uzun so‘zlarni yangi qatorga ko‘chirishga majburlaydi, agar bu so‘z konteynerga sig‘masa. Bunda so‘z yangi qatordan boshlanadi. |
normal |
Standart xatti-harakat: agar uzun so‘z konteyner eniga sig‘masa - u shunchaki uning chegarasidan chiqib ketadi (bunda yangi qatordan boshlanadi). |
Standart qiymat: normal.
Misol . Normal qiymati
Ushbu misolda juda uzun so‘z konteynerga sig‘maydi va uning chegarasidan chiqib ketadi (bunda yangi qatordan boshlanadi):
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur adipiscing elit.
</div>
#elem {
word-wrap: normal;
overflow-wrap: normal;
border: 1px solid red;
width: 200px;
}
:
Misol . Break-word qiymati
Endi esa sig‘magan harflar shunchaki keyingi qatorga ko‘chiriladi (bunda uzun so‘z baribir yangi qatordan boshlanadi):
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur adipiscing elit.
</div>
#elem {
overflow-wrap: break-word;
border: 1px solid red;
width: 200px;
}
:
Shuningdek qarang
-
word-breakxususiyati,
bu ham uzun so‘zning harflarini yangi qatorga ko‘chirishga imkon beradi -
word-wrapxususiyati,
bu overflow-wrap xususiyatining eskirgan nomidir -
hyphensxususiyati,
bu so‘zlarni bo‘g‘inlarga ajratib ko‘chirishni yoqadi -
wbrtegi,
bu HTML vositalari yordamida yumshoq ko‘chirishlarni amalga oshiradi -
brtegi,
bu yordamida matnni yangi qatorga majburan ko‘chirish mumkin