Разрыв слова - CSS-хитрости

word-breakСвойство в CSS можно использовать для изменения , когда разрывы строк должны произойти. Обычно разрывы строк в тексте могут происходить только в определенных пробелах, например, когда есть пробел или дефис.

В приведенном ниже примере мы можем word-breakвместо этого сделать между буквами:

p ( word-break: break-all; )

Если затем установить ширину текста равной единице em, слово будет разрываться на каждую букву:

См. Текст настройки пера по вертикали с разрывом слова от CSS-Tricks (@ css-tricks) на CodePen.

Это значение часто используется в местах с пользовательским контентом, поэтому длинные строки не рискуют нарушить макет. Один очень распространенный пример - длинная копия и вставленный URL. Если этот URL-адрес не имеет дефисов, он может выходить за пределы родительского блока и выглядеть плохо или, что еще хуже, вызывать проблемы с разметкой.

См. Ссылки «Исправление пера с разрывом слова» от CSS-Tricks (@ css-tricks) на CodePen.

Значения

normal: используйте правила по умолчанию для разбиения по словам.
break-all: любое слово / буква может перейти на следующую строку.
keep-all: для китайского, японского и корейского текста слова не разбиваются. В остальном это то же самое, что и normal.

Это свойство также часто используется в сочетании со свойством дефисов, так что при возникновении разрывов вставляется дефис в соответствии со стандартом в книгах.

Полное использование с необходимыми префиксами поставщиков:

 -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

Использование этих свойств в универсальном селекторе может быть полезно, если у вас есть сайт с большим количеством пользовательского контента. Хотя справедливое предупреждение, это может выглядеть странно в заголовках и предварительно отформатированном тексте (

Связанный

переполнение
дефисы
белое пространство
Обработка длинных слов и URL-адресов

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.