Контент, переносы и разрывы строк, переполнения контента

user-content-wrap-text.md

1. Верстка: отображаем пользовательский контент
2. Где всё сложно с переносами строк. Вот все CSS- и HTML-хитрости для этого
3. Передряги при переносах
4. Florian Rivoal. line-breaking
5. A new terminal-style line breaking with CSS Text
6. wrapping-long-words-css-html
7. Неизведанные глубины CSS: метрики шрифта, line-height и vertical-align
8. Deep Dive into Text Wrapping and Word Breaking

overflow-wrap (старый word-wrap)

• normal
• break-word - разрыв слов, но мягие переносы не рассчитываются по размерам контента. Если слово не может разорваться, переполняя контейнер, оно может разорваться где угодно во избежание переполнения.
• anywere - отличие в том, что есть разрывы, учитываются для расчета min-content

word-break

меняет определение того, что считать словом.

• normal - между любыми 2-мя символами
• break-all - за исключением дальневосточных (CJK) языков. Воспринимает любой текст как восточноазиатский, который может переноситься практически где угодно (кроме точек в конце предложений и закрывающих скобок)
• keep-all - для дальневосточных языков, перевод не сохраняет строки. воспринимает восточноазиатские иероглифы как буквы в слове, а не как целые слова.
• break-word

hyphens

• none
• manual - дефис выставляется в месте переноса только при наличии указывающего на это символа. Указать это можно, вставив символ либо жёсткого (-, <wbr /> - отображае без дефиса), либо мягкого переноса (­, не отображает дефис, если не нужно) в нужное место в разметке.
• auto - лучше явно указывать язые lang="ru"

white-space

• normal
• nowrap
• pre - учитывает все пробельные символы в разметке, и не разбивает строки
• pre-wrap - учитывает добавочные пробелы, но заставляет строку разбиваться.
• pre-line -то же, что и normal, но сохраняет переносы строк
• break-spaces
• -moz-pre-space

line-break

• anywere - «как word-break: break-all;» за исключением того, что она на самом деле разрывает всё, как примитивная программа на терминале.