Word Break CSS

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

Свойство word-break может иметь несколько значений:

1. normal (по умолчанию): перенос слов осуществляется только в точках, где это допустимо с точки зрения языка, например, после дефиса или пробела.

Пример CSS кода:

.word-break-example {
  word-break: normal;
}

2. break-all: слова могут быть перенесены в любой позиции. Это может быть полезно для азиатских языков, в которых нет пробелов между словами.

Пример CSS кода:

css
.word-break-example {
  word-break: break-all;
}

3. keep-all: перенос слов не разрешен, за исключением законных позиций. Это подходит для текста, который содержит иностранные слова и требует сохранения их вместе без переносов.

Пример CSS кода:

css
.word-break-example {
  word-break: keep-all;
}

4. break-word (устаревшее): аналогично свойству break-all, но также позволяет разрывать длинные слова на части, если они не помещаются в блок.

Пример CSS кода:

css
.word-break-example {
  word-break: break-word;
}

Ниже приведены примеры HTML кода, в которых свойство word-break применяется к блокам с текстом:

html
ThisIsAReallyLongWordThatNeedsToBeBrokenToFitInContainer

html
这是一个需要换行的很长的中文句子

html
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

С помощью CSS свойства word-break можно управлять переносами слов в тексте и достичь желаемого эффекта для различных языков или ситуаций.