Используйте знаки переноса ­
:
­
- разрывает слова при необходимости в тех местах, в которых вы укажете и добавляет знак переноса
div {
width: 60px;
background-color: red;
}
<div>xxx­xxx­xxx­xxx­xxx­xxx</div>
Используйте тег переноса слова <wbr>
:
<wbr>
- тоже самое, но без знака переноса
div {
width: 60px;
background-color: red;
}
<div>xxx<wbr>xxx<wbr>xxx<wbr>xxx<wbr>xxx<wbr>xxx</div>
Используйте свойство word-wrap
:
word-wrap: break-word;
- разрывает слова без учета грамматики
div {
width: 60px;
background-color: red;
word-wrap: break-word;
}
<div>xxxxxxxxxxxxxxxxxxxx</div>
Используйте свойство hyphens
:
hyphens
по идее должен автоматически определять где расставлять знаки переноса с учетом грамматики, но пока он слабо поддерживается браузерами.
div {
width: 60px;
background-color: red;
word-wrap: break-word;
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}
<div>xxxxxxxxxxxxxxxxxxxx</div>
word-wrap: break-word;
htmlbook.ru/css/word-wrap