Переносы слов в HTML

Суровое настроящее. CSS cвойство word-break

Автоматический топорный перенос слов (без добавление дефисов).

Интересуемые значения свойства:

  • break-all
    Автоматический перенос всех слов, текст выглядик как выровненный по ширине.
  • break-word (используется на этом сайте в заголовках)
    Перенос отдельных слов, которые не поместилось в заданную ширину блока.

Светлое будущее. СSS cвойство hyphens

Правила переносов определяются словарём встроенным в браузер. Свойство работает при наличии атрибута lang с кодом языка на уровне всего документа или отдельных его частей.

Интересуемые значения:

  • manual (используется по умолчанию)
    Слова переносятся только в тех местах текста, где добавлен спецсимвол &shy (мягкий перенос) или тег <wbr>. Спецсимволы вручную расставляются в тексте, не видны в обычном тексте и если слово не помещается, браузер в месте нахождения спецсимвола создаёт перенос. Спецсимвол &shy при переносе слова добавлять дефис (как учили в школе), а тег нет.
  • auto
    Браузер добавляет переносы автоматически на основе встроенного словаря. До сих пор слабая поддержка браузерами, в хроме не работает(.
<html lang="en">
...
</html>

<p lang="ru">
Програм<wbr>миирование — процесс и искусство создания компьютерных программ 
с помощью языков програм&shyмирования.
</p>
p {
    hyphens: auto;
}

Запрет переносов

Существует обратная задача — запретить переносы. Например, не отделять инициалы от фамилии или единицы измерения от значений (100 кг). Чтобы браузер не добавлял переносы, следует вместо обычного пробела написать неразрывный пробел &nbsp

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

Похожие записи

TLDR

tldr - man в сокращенном изложении)