Атрибуты: Параметры, управляющие "разрывом" текстового контента.

  Группу специальных атрибутов стилей CSS можно выделить по функционалу для управления переносами пользовательского представления текстового контента в поле элемента тега на Web-странице, а так же для управления переносами контента в колонках и при печати.
  Разрывы слов и формат текста.
  Сло́ва, при переносе текста, обычно не разрываются. По умолчанию, при переносе, текст может переносится только по месту где находится:
  1. Клавишный пробел
  2. Средний пробел -  
  3. Длинный пробел -  
  4. Короткий пробел -  
  5. Клавишный дефис (знак - клавиатуры воспринимается в HTML-коде как дефис а не как минус, по которому разрыва не происходит).
  6. Длинный дефис - —
  7. Средний дефис - –
  8. "Мягкий" дефис - ­. "Мягкий" дефис устанавливает рекомендованное место переноса текста с "разрывом" слова в этом месте, и проявляется только при фактическом переносе текста в этом месте.
  9. Многоточие - …
  10. Aкут - ´
  11. Знак табуляции (заданный клавишей Tab), в том числе и с учётом значения атрибута стиля tab-size. При этом, даже если значение атрибута tab-size установлено в 0, в месте символа табуляции всё равно сохраняется возможность переноса текста.
  12. Знак переноса строки (заданный клавишей Enter)
  13. Элемент тега WBR
  14. Некоторые символы шрифта WingDings

  В тексте можно указать неразрывный пробел -   (например, для отображения программного кода), и неразрывный дефис - ‑ (например, для отображения даты).
  Атрибуты стиля для управления разрывами слов и форматированием позволяют установить особые правила разрыва слов в текстовом контенте определяемого элемента тега.
  Атрибуты:
  overflow-wrap - Устанавливает правила "разрыва" слов при переносе текста в пользовательском представлении текстового контента, если такой текст не помещается в ширину поля элемента тега.

Формат:

  • overflow-wrap:
      |break-word
      |normal
      |initial
      |inherit
      |unset

Значения:

  • break-word – Разрешает "разрывать" не "разрывные" слова (кроме слов с иероглифами) в некоторых случаях.
  • normal - Если текст не входит в ширину поля элемента, то он или перенесётся на новую строку, или(и) выйдет за его границу, в любом случае без "разрыва" не "разрывных" слов. (Умолчание.)
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям если таковые есть, в противном случае - к значениям по умолчанию.
  Значение break-word атрибута overflow-wrap, в отличии от значения break-all атрибута word-break, учитывает предназначенные для переносов места и не препятствует таким переносам. Однако, если даже при наличии таких переносов (или их отсутствии), текст не вмещается в ширину поля, значение break-word разрешает произвольно разрывать слова для переноса текста.
  При совместном использовании атрибута overflow-wrap и атрибута word-break, атрибут word-break имеет преимущество.
  Также при совместном использовании атрибута overflow-wrap и атрибута white-space, атрибут white-space имеет преимущество.
  Атрибут overflow-wrap заменил устаревший атрибут word-wrap.
  word-wrap - Устанавливает правила "разрыва" слов при переносе текста в пользовательском представлении текстового контента, если такой текст не помещается в ширину поля элемента тега.

Формат:

  • word-wrap:
      |break-word
      |normal
      |initial
      |inherit
      |unset

Значения:

  • break-word – Разрешает "разрывать" не "разрывные" слова (кроме слов с иероглифами) в некоторых случаях.
  • normal - Если текст не входит в ширину поля элемента, то он или перенесётся на новую строку, или(и) выйдет за его границу, в любом случае без "разрыва" не "разрывных" слов. (Умолчание.)
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Значение break-word атрибута word-wrap, в отличии от значения break-all атрибута word-break, учитывает предназначенные для переносов места и не препятствует таким переносам. Однако, если даже при наличии таких переносов (или их отсутствии), текст не вмещается в ширину поля, значение break-word разрешает произвольно разрывать слова для переноса текста.
  При совместном использовании атрибута word-wrap и атрибута word-break, атрибут word-break имеет преимущество.
  Также при совместном использовании атрибута word-wrap и атрибута white-space, атрибут white-space имеет преимущество.
  Атрибут word-wrap устарел и заменён атрибутом overflow-wrap.
  word-break - Устанавливает правила "разрыва" слов при переносе текста в пользовательского представлении текстового контента, если такой контент не помещается в ширину поля элемента тега.

Формат:

  • word-break:
      break-all
      |keep-all
      |normal
      |initial
      |inherit
      |unset

Значения:

  • break-all – Можно "разрывать" все слова (кроме слов с иероглифами).
  • keep-all – Нельзя "разрывать" не "разрывные" слова (кроме слов с иероглифами), Строки переносятся по стандартным правилам.
  • normal - Нельзя "разрывать" не "разрывные" слова (умолчание). Строки переносятся по стандартным правилам
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Значения keep-all или normal атрибута word-break разрешают переносить текст только в указанных местах.
  Значение break-all атрибута word-break разрешает разрывать слова не обращая внимание на предназначенные для этого места.
  Атрибут word-break имеет преимушество над атрибутами overflow-wrap и word-wrap при совместном использовании.
  Также при совместном использовании атрибута word-break и атрибута white-space, атрибут white-space имеет преимущество.
  white-space - Устанавливает правила "разрыва" при переносе и формат текста в пользовательском представлении текстового контента.

Формат:

  • white-space:
      pre
      |nowrap
      |pre-wrap
      |pre-line
      |normal
      |initial
      |inherit
      |unset

Значения:

  • pre - Неразрывный текст фиксированного формата.
      Все пробелы (в том числе  ,  ,  ), табуляция и переносы строк (Enter) сохраняются, как есть в HTML-коде.
      Текст переносится только переносом строк (Enter).
  • nowrap – Неразрывный текст не фиксированного формата.
      Последовательности клавишных пробелов, табуляции, переводов строк представляются как один пробел.
      Последовательности пробелов -  ,  ,   сохраняются.
      Текст вообще не переносится.
  • pre-wrap – Текст фиксированного формата.
      Все пробелы (в том числе  ,  ,  ), табуляция и переносы строк сохраняются.
      Для избегания горизонтального скроллинга браузер может переносить текст в пользовательском представлении текстового контента.
      Текст переносится по стандартным правилам.
  • pre-line – Текст фиксированного формата.
      Все пробелы (в том числе  ,  ,  ), табуляция и переносы строк сохраняются.
      Для избегания горизонтального скроллинга браузер может переносить текст в пользовательском представлении текстового контента.
      Текст переносится по стандартным правилам.
  • normal - Обычный текст.
      Пробелы между словами представляются как один пробел, переводы строк представляются как пробел.
      Текст переносится по стандартным правилам.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Значение pre-wrap и(или) pre-line атрибута white-space, разрешает переносить текст в предназначенных для этого местах.
  При совместном использовании атрибута white-space и атрибутов overflow-wrap, word-wrap, word-break, атрибут white-space имеет преимущество.
  Ширина отступа табуляции и интервалы между словами.
  Атрибуты:
  tab-size - Устанавливает ширину отступа, заданного символом табуляции (клавиша Tab).

Формат:

  • tab-size:
      Количество
      |Размер
      |initial
      |inherit
      |unset

Значения:

  • Количество – Положительное число символов моноширинного текста задающее количество обычных (клавишных) пробелов в одном символе табуляции. (По умолчанию равно 1.)
      У моноширинного шрифта все символы имеют одинаковую ширину, в отличие от пропорциональных, у которых ширина символов различна.
  • Размер – Положительная линейная величина с единицей измерения. Не поддерживается большинством браузеров.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Атрибут tab-size имеет смысл только для текста фиксированного формата. То есть для элементов тега PRE или элементов, связанных с атрибутом стиля white-space со значением pre или pre-wrap.
  word-spacing - Устанавливает интервалы между словами.

Формат:

  • word-spacing:
      Размер
      |normal
      |initial
      |inherit
      |unset

Значения:

  • РазмерЛинейная величина с единицей измерения.
      Допускаются отрицательные значения.
  • normal - Нормальная ширина интервала, которая соответствует ширине одного клавишного пробела текущего шрифта.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Атрибут word-spacing имеет смысл только для текста фиксированного формата. То есть для элементов тега PRE или элементов, связанных с атрибутом стиля white-space. Интервал между словами определяется в тексте по клавишному пробелу или символу переноса (Enter). По существу атрибут word-spacing и задает ширину клавишного пробела (эта ширина сохраняется и при переносе текста) в тексте фиксированного формата, и значение nowrap атрибута white-space не сжимает интервал установленный атрибутом word-spacing. Пробелы -  ,  ,   и табуляция не воспринимаются атрибутом word-spacing как интервал между словами.
  Разрывы страниц и колонок.
  Атрибуты:
  break-after - Устанавливает правило перехода после определяемого элемента тега на новую страницу при печати контента Web-страницы, или на новую колонку в текстовом контенте разбитом на колонки.

Формат:

  • break-after:
      always
      |auto
      |avoid
      |column
      |left
      |page
      |right
      |initial
      |inherit
      |unset

Значения:

  • always – Безусловный переход на новую страницу после определяемого элемента.
      always тоже самое, что и page, и поддерживается для логической совместимости с атрибутом стиля page-break-after.
  • auto – Автоматический переход после определяемого элемента на новую страницу или новую колонку, если это необходимо (умолчание).
  • avoid – Переход на новую страницу запрещен после определяемого элемента.
  • column – Безусловный переход на новую колонку после определяемого элемента.
  • left – Безусловный переход на новую страницу после определяемого элемента. Новая страница печатается как левая страница документа.
  • page – Безусловный переход на новую страницу после определяемого элемента.
  • right – Безусловный переход на новую страницу после определяемого элемента. Новая страница печатается как правая страница документа.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Значения этого атрибута стиля имеют смысл только, если поле определяемого элемента тега не пустое.
  page-break-after - При печати контента Web-страницы устанавливает правило перехода на новую страницу после определяемого элемента тега.

Формат:

  • page-break-after:
      always
      |auto
      |avoid
      |left
      |right
      |initial
      |inherit
      |unset

Значения:

  • always – Безусловный переход на новую страницу после определяемого элемента.
  • auto – Автоматический переход после определяемого элемента на новую страницу, если это необходимо (умолчание).
  • avoid – Переход на новую страницу запрещен после определяемого элемента.
  • left – Безусловный переход на новую страницу после определяемого элемента. Новая страница печатается как левая страница документа.
  • right – Безусловный переход на новую страницу после определяемого элемента. Новая страница печатается как правая страница документа.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Значения этого атрибута стиля имеют смысл только, если поле определяемого элемента тега не пустое.
  break-before - Устанавливает правило перехода перед определяемым элементом тега на новую страницу при печати контента Web-страницы, или на новую колонку в текстовом контенте разбитом на колонки.

Формат:

  • break-before:
      always
      |auto
      |avoid
      |column
      |left
      |page
      |right
      |initial
      |inherit
      |unset

Значения:

  • always – Безусловный переход на новую страницу перед определемым элементом.
      always тоже самое, что и page, и поддерживается для логической совместимости с атрибутом стиля page-break-before.
  • auto – Автоматический переход перед определемым элементом на новую страницу или новую колонку, если это необходимо (умолчание).
  • avoid – Переход на новую страницу запрещен перед определемым элементом.
  • column – Безусловный переход на новую колонку перед определемым элементом.
  • left – Безусловный переход на новую страницу перед определемым элементом. Новая страница печатается как левая страница документа.
  • page – Безусловный переход на новую страницу перед определемым элементом.
  • right – Безусловный переход на новую страницу перед определемым элементом. Новая страница печатается как правая страница документа.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Значения этого атрибута стиля имеют смысл только, если поле определяемого элемента тега не пустое.
  page-break-before - При печати контента Web-страницы устанавливает правило перехода на новую страницу перед определяемым элементом тега.

Формат:

  • page-break-before:
      always
      |auto
      |avoid
      |left
      |right
      |initial
      |inherit
      |unset

Значения:

  • always – Безусловный переход на новую страницу перед определяемым элементом.
  • auto – Автоматический переход на новую страницу, если это необходимо перед определяемым элементом (умолчание).
  • avoid – Переход на новую страницу запрещен перед определяемым элементом.
  • left – Безусловный переход новую страницу перед определяемым элементом.
      Новая страница печатается как левая страница документа.
  • right – Безусловный переход новую страницу перед определяемым элементом.
      Новая страница печатается как правая страница документа.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Значения этого атрибута стиля имеют смысл только, если поле определяемого элемента тега не пустое.
  break-inside - Устанавливает правило перехода внутри поля определяемого элемента тега на новую страницу при печати контента Web-страницы, или на новую колонку в текстовом контенте разбитом на колонки.

Формат:

  • break-inside:
      auto
      |avoid
      |avoid-column
      |avoid-page
      |initial
      |inherit
      |unset

Значения:

  • auto – Автоматический переход на новую страницу или новую колонку, если это необходимо (умолчание).
  • avoid – Переход на новую страницу запрещен.
      avoid тоже самое, что и avoid-page, и поддерживается для логической совместимости с атрибутом стиля page-break-inside.
  • avoid-column – Переход на новую колонку запрещен.
  • avoid-page – Переход на новую страницу запрещен.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Значения этого атрибута стиля имеют смысл только, если поле определяемого элемента тега не пустое.
  page-break-inside - При печати контента Web-страницы устанавливает правило перехода на новую страницу внутри поля определяемого элемента тега.

Формат:

  • page-break-inside:
      auto
      |avoid
      |initial
      |inherit
      |unset

Значения:

  • auto – Автоматический переход на новую страницу, если это необходимо (умолчание).
  • avoid – Переход на новую страницу запрещен.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Значения этого атрибута стиля имеют смысл только, если поле определяемого элемента тега не пустое.
  orphans - При печати контента Web-страницы устанавливает минимальное число строк текстового контента определяемого элемента тега, которое должно быть напечатано на текущей странице.
  Если атрибут стиля orphans не задан, то текстовый контент элемента может быть перенесён на новую страницу в любой строке.

Формат:

  • orphans:
      Число строк
      |initial
      |inherit
      |unset

Значения:

  • Число строк – Положительное целое число.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Значения этого атрибута стиля имеют смысл только, если поле определяемого элемента тега не пустое.

Пример word-break и word-wrap (Opera, размер шрифта: 100% средний):

<DIV>1111&thinsp;2222&thinsp;3333&thinsp;4444&thinsp;5555&thinsp;6666&thinsp;7777&thinsp;8888&thinsp;9999</DIV>
   word-break: break-all        word-wrap: break-word
1111 2222 3333 4444 5555 6666 7777 8888 9999
1111 2222 3333 4444 5555 6666 7777 8888 9999
Наведите мышку


<DIV>1111 2222 3333 4444 5555 6666 7777 8888 9999</DIV>
   word-break: break-all        word-wrap: break-word
1111 2222 3333 4444 5555 6666 7777 8888 9999
1111 2222 3333 4444 5555 6666 7777 8888 9999
Наведите мышку


<DIV>1111&ensp;2222&ensp;3333&ensp;4444&ensp;5555&ensp;6666&ensp;7777&ensp;8888&ensp;9999 </DIV>
   word-break: break-all        word-wrap: break-word
1111 2222 3333 4444 5555 6666 7777 8888 9999
1111 2222 3333 4444 5555 6666 7777 8888 9999
Наведите мышку


<DIV>1111&emsp;2222&emsp;3333&emsp;4444&emsp;5555&emsp;6666&emsp;7777&emsp;8888&emsp;9999 </DIV>
   word-break: break-all        word-wrap: break-word
1111 2222 3333 4444 5555 6666 7777 8888 9999
1111 2222 3333 4444 5555 6666 7777 8888 9999
Наведите мышку


<DIV>1111&nbsp;2222&nbsp;3333&nbsp;4444&nbsp;5555&nbsp;6666&nbsp;7777&nbsp;8888&nbsp;9999 </DIV>
   word-break: break-all        word-wrap: break-word
1111 2222 3333 4444 5555 6666 7777 8888 9999
1111 2222 3333 4444 5555 6666 7777 8888 9999
Наведите мышку


<DIV>1111-2222-3333-4444-5555-6666-7777-8888-9999</DIV>
   word-break: break-all        word-wrap: break-word
1111-2222-3333-4444-5555-6666-7777-8888-9999
1111-2222-3333-4444-5555-6666-7777-8888-9999
Наведите мышку


<DIV>1111&mdash;2222&mdash;3333&mdash;4444&mdash;5555&mdash;6666&mdash;7777&mdash;8888&mdash;9999</DIV>
   word-break: break-all        word-wrap: break-word
1111—2222—3333—4444—5555—6666—7777—8888—9999
1111—2222—3333—4444—5555—6666—7777—8888—9999
Наведите мышку


<DIV>1111&ndash;2222&ndash;3333&ndash;4444&ndash;5555&ndash;6666&ndash;7777&ndash;8888&ndash;9999</DIV>
   word-break: break-all        word-wrap: break-word
1111–2222–3333–4444–5555–6666–7777–8888–9999
1111–2222–3333–4444–5555–6666–7777–8888–9999
Наведите мышку


<DIV>1111&#8209;2222&#8209;3333&#8209;4444&#8209;5555&#8209;6666&#8209;7777&#8209;8888&#8209;9999</DIV>
   word-break: break-all        word-wrap: break-word
1111‑2222‑3333‑4444‑5555‑6666‑7777‑8888‑9999
1111‑2222‑3333‑4444‑5555‑6666‑7777‑8888‑9999
Наведите мышку


<DIV>1111&minus;2222&minus;3333&minus;4444&minus;5555&minus;6666&minus;7777&minus;8888&minus;9999</DIV>
   word-break: break-all        word-wrap: break-word
1111−2222−3333−4444−5555−6666−7777−8888−9999
1111−2222−3333−4444−5555−6666−7777−8888−9999
Наведите мышку


<DIV>1111&shy;2222&shy;3333&shy;4444&shy;5555&shy;6666&shy;7777&shy;8888&shy;9999</DIV>
   word-break: break-all        word-wrap: break-word
1111­2222­3333­4444­5555­6666­7777­8888­9999
1111­2222­3333­4444­5555­6666­7777­8888­9999
Наведите мышку


<DIV>1111&hellip;2222&hellip;3333&hellip;4444&hellip;5555&hellip;6666&hellip;7777&hellip;8888&hellip;9999</DIV>
   word-break: break-all        word-wrap: break-word
1111…2222…3333…4444…5555…6666…7777…8888…9999
1111…2222…3333…4444…5555…6666…7777…8888…9999
Наведите мышку