# Свойство overflow-wrap

Свойство `overflow-wrap` позволяет перенести буквы длинного слова на новую строку, если это слово не влазит в ширину контейнера.

## Синтаксис

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

## Значения

Значение | Описание
--- | ---
`break-word` | Заставляет длинные слова переноситься на новую строку, если это слово не помещается в контейнер. При этом слово начнется с новой строки.
`normal` | Стандартное поведение: если длинное слово не влазит по ширине в контейнер - оно просто вылезет за его границу (при этом начнется с новой строки).

Значение по умолчанию: `normal`.

## Пример . Значение normal

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы (при этом начнется с новой строки):

`<div id="elem"> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>` `#elem { word-wrap: normal; overflow-wrap: normal; border: 1px solid red; width: 200px; }`

:

## Пример . Значение break-word

А теперь те буквы, которые не помещались, просто перенесутся на следующую строку (при этом длинное слово все равно будет начинаться с новой строки):

`<div id="elem"> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>` `#elem { overflow-wrap: break-word; border: 1px solid red; width: 200px; }`

:

## Смотрите также

- свойство `word-break`,
  которое также позволяет перенести буквы длинного слова на новую строку
- свойство `word-wrap`,
  которое является устаревшим названием свойства overflow-wrap
- свойство `hyphens`,
  которое включает переносы слов по слогам
- тег `wbr`,
  который реализует мягкие переносы средствами HTML
- тег `br`,
  с помощью которого можно принудительно заставить перенести текст на новую строку

← →
↑
en ru