Својството overflow-wrap

Својството overflow-wrap овозможува пренос на буквите на долг збор на нова линија, ако тој збор не се вклопува во ширината на контејнерот.

Синтакса

cssселектор {
  overflow-wrap: break-word | normal;
}

Вредности

Стандардна вредност: normal.

Пример . Вредност normal

Во овој пример многу долгиот збор нема да може да се вклопи во контејнерот и ќе излезе надвор од неговите граници (при тоа ќе започне на нова линија):

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

Результат:

Пример . Вредност break-word

А сега оние букви кои не се вклопуваа, едноставно ќе се пренесат на следната линија (при тоа долгиот збор сепак ќе започнува од нова линија):

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

Результат:

Погледнете ги и