Свойство word-break

Свойството word-break позволява буквите на дълга дума да се пренесат на нов ред, ако тази дума не се побира в ширината на контейнера.

Синтаксис

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

Стойности

Стойност по подразбиране: normal.

Пример . Стойност normal

В този пример много дългата дума няма да се побере в контейнера и ще излезе извън границите му (като ще започне на нов ред):

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

Результат:

Пример . Стойност break-all

А сега тези букви, които не се побираха, просто ще се пренесат на следващия ред:

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

Результат:

Вижте също