Перенос слов CSS (свойства overflow-wrap, word-wrap, word-break, hyphens)

Указанные ниже свойства CSS определяют как переносить длинные слова:

  1. только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел &nbsp; и неразрывный дефис &#8209;). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. "Мягкий дефис" &shy; проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то <wbr> или &#8203; переносит его часть без чёрточки. В математических выражениях используется минус (например, 5 − 2). В номерах телефонов отображается цифровая чёрта (например, +7 800 000‒00‒00). И всё это не является той знакомой -, что есть на клавиатуре.
  2. после любого символа.
  3. согласно правилам русского языка с автоматическим применением дефиса.
overflow-wrap
word-wrap
word-break
line-break
hyphens
уже переосвидетельствовался наш тысячадевятьсотдевяностодевяти­килограммовый корчеватель‐бульдозер‐погрузчик
<style>
.div {
  overflow-wrap: normal;break-word;  /* не поддерживает IE, Firefox; является копией word-wrap */ 
  word-wrap: normalbreak-word;
  word-break: normal;keep-all;break-all;  /* не поддерживает Opera12.14, значение keep-all не поддерживается IE, Chrome */ 
  line-break: autoloosenormalstrict;  /* нет поддержки для русского языка */ 
 -webkit-hyphens: none; -webkit-hyphens: auto; -ms-hyphens: none;-ms-hyphens: auto; hyphens: manualnoneauto;  /* значение auto не поддерживается Chrome */ 
  width: 50%;
  white-space: nowrap;}
</style>

<div class="div" lang="ru"lang="ru">уже переосвидетельствовался наш тысячадевятьсотдевяностодевяти&shy;килограммовый корчеватель‐бульдозер‐погрузчик</div>

В чём состоит различие одно свойства от другого

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

Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим word-break: keep-all;.

Для того, чтобы браузер не обращал внимания и на мягкий дефис, вставляем hyphens: none;.

Если требуется перенос слов, то word-wrap: break-word; советую применять всегда, поскольку он понимается всеми браузерами. Он отличается от word-break: break-all;, которое является приоритетным, тем, что слова, которые не помещаются в блок, начинаются с новой строки и учитывается рекомендация мягкого дефиса.

При совместном использовании word-break: break-all; с hyphens: auto;, последнее игнорируется. hyphens: auto; расставляет любые дефисы по своему усмотрению. Но для того, чтобы оно работало, нужно обозначить свой язык, указав в div атрибут lang="ru".

Не переносить слова на другую строку

Скажем, пункт меню или кнопка будут нехорошо выглядеть, если разъедутся на части. Поэтому надо запретить их разделение. Для чего все вышеуказанные свойства следует поставить в режим "по умолчанию" и добавить white-space: pre; или white-space: nowrap;. Нажмите на и посмотрите на наш полигон.

Управлять переносом слов при hyphens: auto;

Тетрагидропиранилциклопентилтетрагидропиридопиридиновые
<div class="hyphens" lang="ru">Тетрагидропиранилциклопентилтетрагидропиридо<span class="nohyphens">пиридино</span>вые</div>

<style>
.hyphens {
  -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /* пока поддерживает только Firefox */ 
  text-align: justify;
}
.nohyphens {
  white-space: nowrap;
}
</style>
в f t
наверх ↑

15 комментариев:

Анонимный
Хорошая статья. Спасибо!
NMitra
Рада слышать!
Анонимный
здорово, спасибо
Vit Simak
white-space: pre-wrap; очень помогает, но только если он один указан или максимум с word-wrap: break-word;
Анонимный
ыва
Людмила Горбач
ваваы
Максим Дунаевский
Вот спасибо! Поправил свою CSS как тут написано - текст на кнопках стал нормально отображаться.
NMitra
Пожалуйста, рада помочь.
Анонимный
Спасибо, хорошая статья.
Анонимный
kjgtfrfghjkl
Анонимный
'); drop table forum; -- lol
NMitra
Чего-чего?
Дмитрий
lang="ru" лучше писать в <html lang="ru-Ru"> </html>

-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
NMitra
Спасибо за дополнение!
Dmitry Mycelin
«'); drop table forum; -- lol»
Это гугловская форма комментариев вообще-то. :)