Когда вы пишите сайты, вы всегда должны брать во внимание текст. Самое главное — как он отображается. В этой записи, я покажу как можно избежать некорректного отображения текста на сайте и сделать это кроссбраузерно.
Как известно, если у вас не настроен перенос строк на сайте, то длинные слова, например: «йцввввввввцйвшщощзвцооооооооооооооооооооооооооооооооооовойщцшовщцйцв» не будут переноситься. Тоже самое касается длинных ссылок, в которых нет тире.
С чем связано такое отображение?
Это связано с тем, что длинное слово (или набор букв) ищет нужное пространство, чтобы поместиться во всю ширину элемента. В случае, если оно не помещается и на следующей строке, то оно вылазит за границу элемента — а это смотрится ужасно.
Не используйте скрипты. Я не рекомендую использовать скрипты для решения этой проблемы — так как это только нагружает ваш сайт. С другой стороны, у разработчиков всегда есть 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
, о котором я говорил выше, а для второго (нижнего) я его использовал.
На этом все. А что вы используете для своего сайта?
Если у вас есть какие-либо вопросы — то пишите их ниже к этой записи.