CSS Word Wrap: Control Text Wrapping with CSS

CSS свойство word-wrap(также известное как overflow-wrap) определяет, каким образом должна происходить перенос слов внутри элемента, если его содержимое выходит за пределы доступного пространства.

Существуют два значения для свойства word-wrap:

1) normal: это значение по умолчанию. В этом режиме браузер не разрешает перенос слов в середине слова, а отображает его в строке целиком, если он не помещается на одной строке.

2) break-word: в этом режиме браузер будет разрезать слово на несколько строк, если оно не помещается на одной строке. Это позволяет тексту размещаться внутри своего контейнера и предотвращает горизонтальную прокрутку или нарушение макета.

Ниже приведены примеры кода с использованием свойства word-wrap:

Пример 1:

p {
  width: 200px;
  word-wrap: break-word;
}

В этом примере указано, что внутри абзаца перенос слов должен осуществляться, если строка не помещается внутри контейнера шириной 200 пикселей.

Пример 2:

div {
  word-wrap: break-word;
}

В этом примере указано, что внутри блочного элемента перенос слов должен осуществляться, если строка выходит за пределы его доступного пространства.

Таким образом, свойство word-wrap может быть полезным для обеспечения адаптивности и читаемости контента на веб-странице.