Savybė overflow-wrap

Savybė overflow-wrap leidžia perkelti ilgo žodžio raides į naują eilutę, jei šis žodis netelpa į konteinerio plotį.

Sintaksė

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

Reikšmės

Numatytoji reikšmė: normal.

Pavyzdys . Reikšmė normal

Šiame pavyzdyje labai ilgas žodis netilps į konteinerį ir išeis už jo ribų (šiuo atveju prasidės naujoje eilutėje):

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;
}

Результат:

Pavyzdys . Reikšmė break-word

O dabar tos raidės, kurios netilpo, tiesiog bus perkeltos į sekančią eilutę (šiuo atveju ilgas žodis vis tiek prasidės naujoje eilutėje):

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;
}

Результат:

Taip pat žiūrėkite