Робота з переповненням та перенесенням тексту в CSS

incss

Короткий підсумок

Дізнайтеся про різні властивості CSS, які допоможуть ефективно маніпулювати та стилізувати текст. Цей посібник охоплює властивості, такі як `word-break`, `overflow-wrap`, `hyphens` та інші.

word-break

Властивість word-break визначає, як слова мають розбиватися, коли досягають кінця рядка. Її можна використовувати для запобігання виходу довгих слів за межі контейнера.

/* Звичайна поведінка */
word-break: normal;
 
/* Якщо вміст перевищує межі блоку,
може бути вставлений розрив рядка між будь-якими двома символами */
word-break: break-all;
 
/* додавати розриви рядків, коли це необхідно,
не намагаючись зберегти цілі слова */
word-break: break-word;
 
/* запобігти застосуванню розривів рядків до
китайських/японських/корейських мов */
word-break: keep-all;

overflow-wrap

Властивість overflow-wrap (раніше відома як word-wrap) дозволяє керувати тим, як текст повинен переноситися, коли він виходить за межі свого контейнера. Це особливо корисно для запобігання виходу довгих слів за межі макету.

/* Звичайна поведінка */
overflow-wrap: normal;
 
/* Розриває слова в будь-якому символі */
overflow-wrap: anywhere;
 
/* Переносить довгі слова на новий рядок,
щоб запобігти переповненню контейнера */
overflow-wrap: break-word;

Основна відмінність від word-break: break-all:

  • word-break: break-all розбиває слова будь-де, щоб запобігти переповненню
  • overflow-wrap: break-word переносить довгі слова на новий рядок, тримаючи слова разом, щоб запобігти переповненню.

Дивіться приклад нижче:

hyphens

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

Правила переносу залежать від мови. У HTML атрибут lang визначає мову. Браузери застосовують розривання слів лише в тому випадку, якщо цей атрибут присутній і доступний відповідний словник.

hyphens: auto;
/* Браузер може автоматично розривати слова на місцях розриву,
слідуючи будь-яким правилам, які він обирає. */
 
/* Слова розриваються при перенесенні на новий рядок лише там, де розриви
вказані в них явно. */
hyphens: manual;
 
/* Слова не розриваються при перенесенні на новий рядок,
навіть якщо вказані розриви. Рядки розриваються лише на пробіли. */
hyphens: none;

Правила переносу не строго визначені в специфікації, тому точне розташування дефісів може відрізнятися між браузерами.

Два символи Юнікоду використовуються для ручного визначення можливих розривів рядків у тексті:

U+2010 або ‐ – "жорсткий" дефіс, який позначає видиму точку розриву. Навіть якщо слово не розбивається, дефіс залишається видимим.

U+00AD або ­ – "м'який" дефіс, який є невидимим і вказує, де браузер повинен розбити слово, якщо це необхідно. У HTML використовуйте ­ для вставки м'якого дефісу.

Більше інформації

Статті

YouTube