Skip to content

Instantly share code, notes, and snippets.

@monochromer
Last active December 25, 2022 17:53
Show Gist options
  • Save monochromer/ab3a0c3ef87806fda02ca4e611dda36f to your computer and use it in GitHub Desktop.
Save monochromer/ab3a0c3ef87806fda02ca4e611dda36f to your computer and use it in GitHub Desktop.
Контент, переносы и разрывы строк, переполнения контента
  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 - дефис выставляется в месте переноса только при наличии указывающего на это символа. Указать это можно, вставив символ либо жёсткого (&#45;, <wbr /> - отображае без дефиса), либо мягкого переноса (&shy;, не отображает дефис, если не нужно) в нужное место в разметке.
  • 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;» за исключением того, что она на самом деле разрывает всё, как примитивная программа на терминале.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment