Як у мобільній версії сторінок зробити гарне перенесення довгих слів

Як у мобільній версії сторінок зробити гарне перенесення довгих слів

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

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

Давайте наочно подивимося, що ми маємо у вихідних даних:

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

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

Помилки Google Search Console | ApollonGuru

Помилки Google Search Console

Для усунення помилки ми розглядали три методи:
1. Властивість CSS word-break: break-all.
Мінуси: немає знака перенесення ‘-‘, перенесення слів може виконуватися граматично неправильно, не підтримується Opera.

2. Властивість CSS word-wrap: break-word.
Мінуси: немає знака перенесення ‘-‘, перенесення слів може виконуватись граматично неправильно, підтримується всіма браузерами, але не підтримується W3C і при валідації видає помилку (властивість word-wrap не існує). Для кращого розуміння рекомендуємо ознайомитися з матеріалом: “Навіщо потрібен валідний код і як усунути помилки валідації“.

Приклад реалізації першого або другого варіанта:

Перенесення довгих слів

Перенесення довгих слів

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

<wbr />

Мінус: потрібно редагувати всі назви статей з довгими словами.

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

&shy;

Мінус: потрібно редагувати всі назви статей з довгими словами.

3. Зменшити розмір шрифту для тексту, який містить слова з великою кількістю символів.
Наприклад:

Зменшення шрифту

Зменшення шрифту

Результати

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

У результаті в мобільній версії сторінок довгі слова виглядають так:

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

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

А в десктопній версії все лишилося без змін:

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

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

І як бонус невелике ТЗ контент-менеджеру на ручні правки контенту:

У заголовках статей, які містять слова понад 14 символів (для кожного сайту будуть свої значення), необхідно додати символ м’якого перенесення в можливому для нього місці (точка з комою в кінці обов’язкова, це не друкарська помилка):

&shy;

Наприклад, слово «Фруктоолігосахариди» необхідно змінити на:

"Фруктоолиго&shy;сахариды"

Рекомендації типу: бери та роби. Нічого складного, а естетична цінність є досить високою.


Будемо вдячні за кожен лайк:

Залишіть коментар, Ваша думка дуже важлива для нас!
Введений e-mail не буде видно іншим користувачам:

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

Back to Top

Telegram

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

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

You have Successfully Subscribed!