Продолжаем бороться за красивый и безошибочный вид мобильной версии страниц. Ранее мы уже рассматривали вариант реализации таблиц для данного типа страниц. Сейчас же предлагаю рассмотреть способы реализации разбивки длинных слов и их переноса, что в свою очередь позволит избавиться от формирования горизонтальной прокрутки.
Способы решения проблем
Давайте наглядно посмотрим, что мы имеем в исходных данных:
Для устранения ошибки мы рассматривали три способа:
1. Свойство CSS word-break: break-all.
Минусы: нет знака переноса ‘-‘, перенос слов может производиться грамматически неправильно, не поддерживается Opera.
2. Свойство CSS word-wrap: break-word.
Минусы: нет знака переноса ‘-‘, перенос слов может производиться грамматически неправильно, поддерживается всеми браузерами, но не поддерживается W3C и при валидации выдает ошибку (свойство word-wrap не существует). Для лучшего понимания рекомендуем ознакомиться с материалом: «Зачем нужен валидный код и как устранить ошибки валидации«.
Пример реализации первого или второго варианта:
В вариантах 1 и 2 можно сделать правильный перенос слова (без знака переноса ‘-‘), добавив в нужном месте слова условный тег:
<wbr />
Минус: требуется редактирование всех названий статей с длинными словами.
Можно сделать правильный перенос слова со знаком переноса ‘-‘, добавив символ мягкого переноса в нужном месте слова:
­
Минус: требуется редактирование всех названий статей с длинными словами.
3. Уменьшить размер шрифта для текста, который содержит слова с большим количеством символов.
Например:
Результаты
Для более четкого отображения мы решили использовать первый способ в связке с мягким переносом.
В итоге в мобильной версии страниц длинные слова выглядят следующим образом:
А в десктопной версии все осталось без изменений:
И как бонус небольшое ТЗ контент-менеджеру на ручные правки контента:
В заголовках статей, которые содержат слова более 14-ти символов (для каждого сайта будут свои значения), необходимо добавить символ мягкого переноса в возможном для него месте (точка с запятой в конце обязательна, это не опечатка):
­
Например, слово «Фруктоолигосахариды» необходимо изменить на:
"Фруктоолиго­сахариды"
Рекомендации вида: бери и делай. Ничего сложного, а эстетическая ценность достаточно высокая.