Різниця між переповненням і перериванням слів?

Яка точна різниця між overflow-wrap/ word-wrapта word-break? І хтось може сказати мені, що краще для розриву дуже довгих посилань? Більшість людей кажуть, що слід використовувати розрив слів у поєднанні з, overflow-wrapале це виглядає не дуже логічно. Я думаю, що використання overflow-wrapв поєднанні з word-wrapдля кращої підтримки між браузерами є найкращим методом. Як ти гадаєш?

Цитування з джерела

• word-wrap: Властивість CSS-word-wrap використовується, щоб вказати, чи може браузер розбивати рядки у словах, щоб запобігти переповненню, коли нерушимий в іншому випадку рядок занадто довгий, щоб вміститися у його вміщує поле.

• overflow-wrap : word-wrapвластивість перейменована overflow-wrapв поточному проекті специфікації тексту CSS3

• word-break: Властивість CSS-break-word використовується, щоб вказати, як (або якщо) розбивати рядки всередині слів

Отже, вам потрібен розрив слів у поєднанні із переходом слів, що є правильною комбінацією.

Це допомагає зрозуміти, що на даний момент word-break: break-wordце справді псевдонім overflow-wrap: anywhere.

word-break: break-wordофіційно застарілий; див. робочий проект текстового модуля CSS рівня 3 :

Для сумісності із застарілим вмістом word-breakвластивість також підтримує застаріле break-wordключове слово. Якщо вказано, це має такий самий ефект, як word-break: normalі overflow-wrap: anywhere, незалежно від фактичного значення властивості overflow-wrap.

Тут слід зазначити, що word-break: break-wordце псевдонім для overflow-wrap: anywhere, а не псевдонім для overflow-wrap: break-word.

( word-break: normalце лише значення за замовчуванням для word-break, тому ви можете ігнорувати його, якщо не встановите інше значення для word-break.)

Як відрізняються overflow-wrap: anywhereі overflow-wrap: break-wordвідрізняються?

Єдина відмінність у документації між ними полягає в тому, що overflow-wrap: anywhereНЕ "розглядає можливості м’якого обгортання, введені словом break", коли воно "обчислює внутрішні розміри мінімального вмісту", тоді як overflow-wrap: break-wordНЕ.

Я думаю, ширина може бути точнішою в деяких випадках, якщо вона враховує їх?

Ось точні відмінності: (на основі тестування в Chrome v81 та підтвердження моїх спостережень посиланням на специфікацію)

пробіл

normal(за замовчуванням): згортає пробіли та ланцюжки; додає розриви рядків, де це потрібно
nowrap: згортає пробіли та розриви рядків; не додає розривів рядків
pre-line: згортає пробіли; додає розриви рядків, де це потрібно
pre-wrap: відсутність згортання; додає розриви рядків там, де це потрібно
break-spaces: те саме, що і попереднє обтікання, за винятком пробілів, здатних викликати додавання розривів рядків
pre: відсутність згортання; не додає розривів рядків

Примітка: Якщо у вибраних white-spaceсписках значень "не додаються розриви рядків", поведінку розриву рядків наступних властивостей застосувати неможливо (тобто ігнорувати).

перерва слів

normal(за замовчуванням): розриває рядок у кінці приміщення останнього слова в контейнері [якщо такий існує], інакше рядок залишається непорушеним
break-word: розриває рядок в кінці останнього відповідного слова в контейнері [якщо такий існує], інакше в кінці контейнера
break-all: розриває рядок у кінець контейнера [може розділити слово, навіть із сусіднім пробілом]

overflow-wrap (застаріла назва: word-wrap)

normal(за замовчуванням): розриває рядок у кінці приміщення останнього слова в контейнері [якщо такий існує], інакше рядок залишається непорушеним
break-word: розриває рядок у кінці останнього слова, що поміщається всередині контейнера [якщо такий існує], інакше в кінці контейнера [якщо не в -flex контейнер], інакше рядок залишається непорушним
anywhere: розриває рядок в кінці останнього слова, що поміщається всередині контейнера [якщо такий існує], інакше в кінці контейнера [так само, як word-break: break-word]

Зверніть увагу, що для overflow-wrap: break-word(як і для будь-якої комбінації, яка залишає рядки занадто довгими для контейнера), неперервана лінія може спричинити розширення гнучкого контейнера за межі вказаного коефіцієнта гнучкості (змушуючи інші гнучкі контейнери стискатися, враховуючи занадто довгий вміст).