Перенос слів у HTML та CSS: Як керувати текстом на вебсторінках

Під час роботи з текстовим наповненням вебсторінок ми можемо зіткнутися з проблемою правильного переносу слів та й взагалі якісного оформлення тексту для різних екранів і вікон. Як краще впоратися з цим і які інструменти нам для цього пропонують HTML та CSS — розглянемо в статті.

У яких випадках нам знадобиться коректний перенос слів?

Ми можемо мати справу з різними типами тексту на вебсторінках: заголовки, параграфи, описи тощо. На жаль, часто браузер не може самостійно розбити текст правильно, і тоді ми стикаємось із такими проблемами:

• Слова вилазять за межі блоку, що значно ускладнює завдання оформлення певного дизайну.
• Текст без належного переносу важко сприймати, що негативно впливає на користувацький досвід.
• Неправильна адаптація відповідно до розмірів вікна чи типу екрана. Наприклад, на якихось специфічних мобільних пристроях текст може мати зовсім не такий вигляд, як ми його планували розмістити.

Як же переносити слова на вебсторінках? 

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

Основні CSS-властивості для контролю переносу слів

1. word-wrap або overflow-wrap:

Ця властивість дає змогу переносити слова, які виходять за межі контейнера.

word-wrap має такі значення:

• normal — слова не переносяться або переносяться тільки в тому разі, якщо явно вказане перенесення. В цьому випадку можливий вихід тексту за межі блоку.
• break-word — слово буде перенесено таким чином, щоб воно не вилізло за межі контейнера.

Глобальні:

• initial — встановлює властивість у початкове значення.
• inherit — успадкує значення властивості, яке задано для батьківського елемента.

2. word-break:

Властивість, яка зазначає, де можливий розрив слова для переносу.

word-break має такі значення:

• normal — стандартні правила перенесення слів. Слова не переносяться або переносяться тільки в тому разі, якщо явно вказане перенесення.
• break-all — слово може перенестися між будь-якими двома літерами.
• keep-all — блокує перенос слів між літерами, розрив для переносу можливий тільки між словами.

Глобальні:

• initial — встановлює властивість у початкове значення.
• inherit — успадкує значення властивості, яке задано для батьківського елемента.

3. white-space:

Властивість white-space вказує браузеру, як відтворювати пробіли між словами, але може бути корисною і для розділення й перенесення слів, загалом для оформлення тексту на сторінках.

white-space має такі значення:

• normal — текст у вікні браузера виводиться як зазвичай, переноси рядків встановлюються автоматично.
• nowrap — пробіли не враховуються, перенесення рядків у коді HTML ігноруються, увесь текст відтворюється одним рядком; заразом додавання <br> переносить текст на новий рядок.
• pre — текст показується з урахуванням усіх пробілів і переносів, як їх додав розробник у коді HTML. Якщо рядок виходить занадто довгим і не поміщається у вікні браузера, то буде додано горизонтальну смугу прокрутки.
• pre-line — у тексті пробіли не враховуються (об’єднуються в один), текст автоматично переноситься на наступний рядок, якщо він не вміщається в задану зону.
• pre-wrap — у тексті зберігаються всі пробіли й переноси, однак, якщо рядок за шириною не вміщається в задану зону, то текст автоматично буде перенесено на наступний рядок.

Глобальні:

• initial — встановлює властивість у початкове значення.
• inherit — успадкує значення властивості, яке задано для батьківського елемента.

статьи по теме:

10 популярных CSS-фреймворков

Инструменты, которые пригодятся каждому фронтенд-разработчику

Практика: Как правильно изменить цвет элемента SVG?

2 проверенных способа

4. hyphens:

Ця властивість дає змогу автоматично додавати роздільники слів (дефіси) на мовному рівні.

hyphens має такі значення:

• none — слова не переносяться навіть за наявності в тексті м’яких переносів &shy; (про ці види переносів поговоримо нижче);
• manual — перенесення слів у тексті відбуваються в тих місцях, де додано &shy; або <wbr>, якщо їх немає, то перенесення не робляться;
• auto — браузер автоматично додає переноси слів на основі вбудованого словника переносів.

Ми оглянули основні можливості CSS, які допоможуть оформити текст на своїх сторінках якісніше. Але для того, щоб зробити це ще більш гнучко, ознайомимося з можливостями HTML.

HTML-інструменти для переносу слів на сторінках

Крім CSS, у HTML є кілька тегів та спеціальних символів, які допомагають у переносі слів. І хоч інколи їх використання вимагає більшого залучення до оформлення текстів на сторінках, це дасть змогу більш гнучко налаштувати наші сторінки та зменшити відсоток неправильно перенесених слів за відтворення на різних девайсах та розмірах вікон.

Тег <wbr>

Вказує браузеру на можливе місце для переносу слова.

Приклад:

Надзвичайнодовге<wbr>слово

У цьому прикладі браузер може розірвати слово для переносу в місці, де розташований тег <wbr>.

Спеціальні символи

Також є спеціальні символи, які покликані спростити роботу із розривом і переносом слів. Про них ми згадували раніше:

• нерозривний пробіл ( ) — запобігає переносу між словами, по суті, звичайний пробіл, але в тому місці, де його використано, браузер не може поставити перенос слова;
• м’який дефіс (­) — додає дефіс лише тоді, коли слово переноситься на новий рядок.

Приклад:

Су&shy;пер&shy;дов&shy;ге&shy;сло&shy;во

Браузер додасть дефіси, коли слово буде перенесено, але якщо цього не відбувається, то воно залишиться без дефісів.

Усі інструменти, які ми оглянули в статті, покликані спростити життя верстальникам і розробникам, але інколи навіть з їх використанням можуть виникати деякі труднощі.

На що варто звернути увагу:

• Не всі браузери однаково підтримують властивості, як-от hyphens, або поведінку тега <wbr>. Це може викликати різну поведінку на різних пристроях.
• Неправильне використання властивостей, зокрема word-break: break-all, може погіршити читабельність тексту.
• Не всі методи переносу однаково добре працюють на мобільних пристроях та в дизайнах із гнучкою версткою.

Це тільки декілька основних труднощів, які можуть виникнути, тому завжди потрібно ретельно тестувати різні сценарії для всіх основних типів екранів, на яких використовуватимуться ваші сторінки.

Отже, HTML та CSS мають певні інструменти для допомоги з перенесенням слів у тексті. Однак важливо пам’ятати про можливі проблеми з кросбраузерною підтримкою та читабельністю тексту і завжди гарненько тестувати ваші рішення. І бажано не в продакшні, іф ю ноу вот ай мін 😅