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