Savybė word-break

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

Sintaksė

cssselektorius {
  word-break: break-all | keep-all | 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ų (tuo pačiu prasidės nuo naujos eilutės):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  word-break: normal;
  border: 1px solid red;
}

Результат:

Pavyzdys . Reikšmė break-all

O dabar tos raidės, kurios netilpo, tiesiog persikels į kitą eilutę:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  word-break: break-all;
  border: 1px solid red;
}

Результат:

Taip pat žiūrėkite