Свойство word-break позволяет перенести буквы длинного слова на новую строку, если это слово не влазит в ширину контейнера.
Синтаксис
селектор {
word-break: break-all | keep-all | normal;
}
Значения
Значение | Описание |
---|---|
break-all | Заставляет длинные слова переносится на новую строку, если это слово не помещается в контейнер. |
keep-all | Для переноса иероглифов. |
normal | Стандартное поведение: если длинное слово не влазит по ширине в контейнер - оно просто вылезет за его границу (при этом начнется с новой строчки). |
Значение по умолчанию: normal.
Пример . Значение normal
В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы (при этом начнется с новой строки):
<div id="elem">
Lorem ipsum dolor sit amet
оооооооооооооооооооооооооооооченьдлинноеслово,
consectetur adipiscing elit.
</div>
#elem {
width: 200px;
word-break: normal;
border: 1px solid red;
}
:
Пример . Значение break-all
А теперь те буквы, которые не помещались, просто перенесутся на следующую строку:
<div id="elem">
Lorem ipsum dolor sit amet
оооооооооооооооооооооооооооооченьдлинноеслово,
consectetur adipiscing elit.
</div>
#elem {
width: 200px;
word-break: break-all;
border: 1px solid red;
}
:
Смотрите также
-
свойство overflow-wrap,
которое также позволяет перенести буквы длинного слова на новую строку -
свойство hyphens,
которое включает переносы слов по слогам -
свойство overflow,
которое обрезает вылезающие за границу блока части -
тег wbr,
который реализует мягкие переносы средствами HTML -
тег br,
с помощью которого можно принудительно заставить перенести текст на новую строку