Когда вы пишите сайты, вы всегда должны брать во внимание текст. Самое главное — как он отображается. В этой записи, я покажу как можно избежать некорректного отображения текста на сайте и сделать это кроссбраузерно. 

Как известно, если у вас не настроен перенос строк на сайте, то длинные слова, например: «йцввввввввцйвшщощзвцооооооооооооооооооооооооооооооооооовойщцшовщцйцв» не будут переноситься. Тоже самое касается длинных ссылок, в которых нет тире.

С чем связано такое отображение?

Это связано с тем, что длинное слово (или набор букв) ищет нужное пространство, чтобы поместиться во всю ширину элемента. В случае, если оно не помещается и на следующей строке, то оно вылазит за границу элемента — а это смотрится ужасно.

Не используйте скрипты. Я не рекомендую использовать скрипты для решения этой проблемы — так как это только нагружает ваш сайт. С другой стороны, у разработчиков всегда есть CSS, в котором всегда найдется решение почти любой проблемы.

CSS word-break и hyphens

Для того, чтобы это исправить, вы можете воспользоваться CSS решением, которое выглядит следующим образом:

.word-break { 
    -ms-word-break: break-all; 
    word-break: break-word; 
    word-wrap: break-word; 

    -webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    hyphens: auto; 
}

Я нашел его тут и мне это очень помогло, так как я не знал как справиться с проблемой переноса строк.

word-break используется для переноса слов. Исключением является CJK (C — Chinise — Китайский, J — Japaneses — Японский  и K — Korean — Корейский) — для этих языков это свойство не работает.

hyphens нужен для того, чтобы установить правила распределения переносов слов.

Если вы волнуетесь про стабильность работы этого снипета, то не волнуйтесь — все хорошо — этот вариант является кроссбраузереным.

Все что вам нужно сделать — это прописать имя класса — word-break для элемента и все готово!

Для примера выше, я специально сделал демо, которые можно просмотреть ниже.

Демо

В демо ниже показано два квадрата, для первого (верхнего) я не использовать класс word-break, о котором я говорил выше, а для второго (нижнего) я его использовал.

На этом все. А что вы используете для своего сайта?

Если у вас есть какие-либо вопросы — то пишите их ниже к этой записи.