Как в мобильной версии страниц сделать красивый перенос длинных слов

Продолжаем бороться за красивый и безошибочный вид мобильной версии страниц. Ранее мы уже рассматривали вариант реализации таблиц для данного типа страниц. Сейчас же предлагаю рассмотреть способы реализации разбивки длинных слов и их переноса, что в свою очередь позволит избавиться от формирования горизонтальной прокрутки.

Способы решения проблем

Давайте наглядно посмотрим, что мы имеем в исходных данных:

Длинное слово приводит к формированию горизонтальной прокрутки

Длинное слово приводит к формированию горизонтальной прокрутки

Ошибки в Google Search Console

Ошибки в Google Search Console

Для устранения ошибки мы рассматривали три способа:

1. Свойство CSS word-break: break-all.

Минусы: нет знака переноса ‘-‘, перенос слов может производиться грамматически неправильно, не поддерживается Opera.

2. Свойство CSS word-wrap: break-word.

Минусы: нет знака переноса ‘-‘, перенос слов может производиться грамматически неправильно, поддерживается всеми браузерами, но не поддерживается W3C и при валидации выдает ошибку (свойство word-wrap не существует). Для лучшего понимания рекомендуем ознакомиться с материалом: “Зачем нужен валидный код и как устранить ошибки валидации“.

Пример реализации первого или второго варианта:

Перенос длинных слов

Перенос длинных слов

В вариантах 1 и 2 можно сделать правильный перенос слова (без знака переноса ‘-‘), добавив в нужном месте слова условный тег:

Минус: требуется редактирование всех названий статей с длинными словами.

Можно сделать правильный перенос слова со знаком переноса ‘-‘, добавив символ мягкого переноса в нужном месте слова:

Минус: требуется редактирование всех названий статей с длинными словами.

3. Уменьшить размер шрифта для текста, который содержит слова с большим количеством символов.

Например:

Уменьшение шрифта

Уменьшение шрифта

Результаты

Для более четкого отображения мы решили использовать первый способ в связке с мягким переносом.

В итоге в мобильной версии страниц длинные слова выглядят следующим образом:

Результат правок в мобильной версии страниц

Результат правок в мобильной версии страниц

А в десктопной версии все осталось без изменений:

Десктопная версия страницы

Десктопная версия страницы

И как бонус небольшое ТЗ контент-менеджеру на ручные правки контента:

В заголовках статей, которые содержат слова более 14-ти символов (для каждого сайта будут свои значения), необходимо добавить символ мягкого переноса в возможном для него месте (точка с запятой в конце обязательна, это не опечатка):

Например, слово “Фруктоолигосахариды” необходимо изменить на:

Рекомендации вида: бери и делай. Ничего сложного, а эстетическая ценность достаточно высокая.


Будем признательны за каждый лайк:


Оставьте комментарий, Ваше мнение очень важно для нас!

Введенный e-mail не будет виден другим пользователям :

Просим ознакомиться с политикой конфиденциальности и соглашением об использовании файлов cookie перед началом использования сайта.

Back to Top

Telegram

Подписывайтесь на наш канал в Telegram, будьте лучше ваших конкурентов

Подпишитесь на наш канал

You have Successfully Subscribed!