overflow-wrap hossasy

overflow-wrap hossasy uzyn sözüň harplaryny, eýer ol söz konteýneriň inişine sıgmasa, täze setire geçirmäge mümkinçilik berýär.

Sintaksis

cssselektor {
  overflow-wrap: break-word | normal;
}

Görnüşleri

Görnüşi Düşündirişi
break-word Uzyn sözleriň konteýneriň içine sıgmazlygy ýagdaýynda täze setire geçirmäge mejbur edýär. Bu ýagdaýda söz täze setirden başlar.
normal Standart ýagdaýy: eýer uzyn söz konteýneriň inişine sıgmasa - ol ýöne onuň çäginden daşary çykar (şol bir wagtyň özünde täze setirden başlar).

Bellenen görnüşi: normal.

Mysal . normal görnüşi

Bu mysalda aýdyň uzyn söz konteýneriň içine sıgamaz we onuň çäginden daşary çykar (şol bir wagtyň özünde täze setirden başlar):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>
css#elem {
  word-wrap: normal;
  overflow-wrap: normal;
  border: 1px solid red;
  width: 200px;
}

Результат:

Mysal . break-word görnüşi

Indi bolsa sıgamadyk şol harplar, ýönekeý ýagdaýda indiki setire geçerler (şol bir wagtyň özünde uzyn söz bolsa hem täze setirden başlar):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>
css#elem {
  overflow-wrap: break-word;
  border: 1px solid red;
  width: 200px;
}

Результат:

Şeýle-de görüň

  • word-break hossasy,
    şeýle hem uzyn sözüň harplaryny täze setire geçirmäge mümkinçilik berýär
  • word-wrap hossasy,
    overflow-wrap hossasynyň köne atlandyrylyşy bolup durýar
  • hyphens hossasy,
    sözleri bogunlar boyunça geçirmäge açýar
  • wbr teg,
    ýumşak geçirmeleri HTML serişdeleri bilen amala aşyrýar
  • br teg,
    onuň kömegi bilen tekstiň täze setire mejburi geçişini amala aşyryp bolýar