Теперь нам нужно изменить правила переноса, чтобы символы, не поместившиеся по ширине в контейнер, переносились на новую строку.

Для этого в CSS существует свойство word-wrap. Оно принимает значения: normal и break-word. В случае normal слова переносятся на новую строку по обычным правилам (то есть по пробелам). А при значении break-word перенос производится браузером в тех местах, где слова перестают помещаться в контейнер.

Это как раз то, что нам нужно: зададим нужный перенос слова, увеличим межсимвольное расстояние и поправим отступ.

Также нужно заметить, что свойство word-wrap — изначально проприетарное расширение Microsoft, а в текущем черновике спецификации CSS переименовано в overflow-wrap. Название word-wrap сейчас обозначено как «альтернативное» именование.