Чтобы управлять переносами строк, когда они не помещаются по ширине в заданную область, можно использовать кроссбраузерную комбинацию word-wrap и white-space.
Свойство word-wrap носит черновой характер и при валидации документа на CSS 3 выдает ошибку.
Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег <pre>, помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу тега <pre>, но в отличие от него не меняет шрифт на моноширинный.
div {
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 2.1/3 */
white-space: -moz-pre-wrap !important; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Ссылки
Источник: https://www.kobzarev.com/makeup/cross-browser-wrapping/
