Свойство 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,
с помощью которого можно принудительно заставить перенести текст на новую строку