Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Контент, переносы и разрывы строк, переполнения контента
  1. (Верстка: отображаем пользовательский контент)[https://habr.com/ru/company/docsvision/blog/310544/]
  2. (Где всё сложно с переносами строк. Вот все CSS- и HTML-хитрости для этого)[https://css-live.ru/articles/gde-vsyo-slozhno-s-perenosami-strok-vot-vse-css-i-html-xitrosti-dlya-etogo.html]
  3. (Передряги при переносах)[https://css-live.ru/articles/peredryagi-pri-perenosax.html]
  4. (Florian Rivoal. line-breaking)[https://florian.rivoal.net/talks/line-breaking]
  5. (A new terminal-style line breaking with CSS Text)[https://blogs.igalia.com/jfernandez/2019/06/10/a-new-terminal-style-line-breaking-with-css-text/]
  6. ()[https://www.cjcid.com/articles/wrapping-long-words-css-html/]

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
You can’t perform that action at this time.