Разница между переносом слов: разрыв слова и разрыв слова: разрыв слова

Question

Мне нужно было где-то исправить CSS, потому что мой текст не был изменен, а вместо этого продолжался бесконечно, если это было очень длинное слово.

Как и в большинстве случаев, я пытался word-wrap: break-word; в моем файле CSS, и это не сработало.

Затем, к моему удивлению, и по предложению Google Chrome Developer Tools я попытался word-break: break-word; и это исправило мою проблему. Я был потрясен этим, поэтому я пытался найти разницу между этими двумя, но я ничего не видел по этому вопросу.

Далее я не думаю word-break: break-word; задокументированное поведение, которое видно как W3 не упоминает об этом. Я протестировал его на Safari и Chrome, и он отлично работает на обоих, но я не решаюсь использовать word-break: break-word; потому что я не вижу упоминаний об этом нигде.

Answer 1

Обновить

Если вы планируете ломать слова, а также хотите использовать переносы, попробуйте следующее:

.hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

Это работало даже в Chrome ... вроде... без дефисов. В любом случае подробное объяснение есть в этой статье.

---

word-break:break-word это не документировано, и только мастера-разработчики знают эту сверхсекретную технику, например, дрожащую ладонь смерти

На самом деле это неясно -webkit- свойство, которое работает как word-wrap: break-word но он также используется на динамических длинах.

Kenneth.io - Гипернация переноса слов с использованием CSS

CSS-хитрости - перерыв

Из CaniUse:

Chrome, Safari и другие браузеры WebKit/Blink также поддерживают неофициальные break-word значение, которое рассматривается как word-wrap: break-word,