Свойство CSS word-break
Используйте свойство CSS word-break, чтобы задать места разрыва строк. Читайте о свойстве и изучайте примеры.
Свойство CSS word-break управляет тем, как слова переносятся, когда текст достигает края своего контейнера. Оно определяет, разрешено ли браузеру разбивать слово между символами, чтобы длинное, непрерываемое содержимое не выходило за пределы блока.
По умолчанию перенос строки происходит только в «мягких точках переноса» — пробелах, дефисах и аналогичных местах. Длинная строка без пробелов (URL, хеш, длинный идентификатор) вообще не будет перенесена и выйдет за пределы своего блока. Установка word-break: break-all сообщает браузеру, что строку можно разбивать в любом символе, поэтому текст переносится вместо того, чтобы выходить за границы.
Это особенно полезно для:
- Длинных URL, путей к файлам или адресов электронной почты внутри узких колонок.
- Пользовательского контента, где невозможно предсказать длину слова.
- Смешанного текста CJK (китайского / японского / корейского) и латинского, где правила переноса отличаются для разных письменностей.
word-break тесно связано с overflow-wrap (ранее word-wrap) и white-space. Ключевое отличие: overflow-wrap: anywhere разбивает слово только тогда, когда оно иначе переполнит контейнер, тогда как word-break: break-all агрессивно разбивает на каждой строке, даже если нормальная точка переноса была доступна. Предпочитайте overflow-wrap в обычных случаях «не дать URL переполнить контейнер», а word-break используйте, когда нужен конкретно посимвольный перенос.
Это свойство входит в число свойств CSS3.
| Начальное значение | normal |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Да. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM Syntax | object.style.wordBreak = "break-all"; |
Синтаксис
Значения CSS word-break
word-break: normal | break-all | keep-all | break-word | initial | inherit;Пример свойства word-break:
Пример кода CSS word-break
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
html,
body {
height: 100%;
}
body {
font-family: Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
background-color: #8ebf42;
}
p {
word-break: break-all;
line-height: 1;
text-transform: uppercase;
text-align: center;
font-size: 30px;
font-weight: bold;
color: #eee;
width: 1em;
}
</style>
</head>
<body>
<p>element</p>
</body>
</html>Результат
В приведённом примере элемент <p> имеет ширину всего 1em, поэтому каждая буква переносится на новую строку — наглядная демонстрация того, как break-all игнорирует обычные точки переноса.
Пример свойства word-break со значением "break-all":
Пример кода CSS word-break break-all
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
font-size: 0.95em;
line-height: 1.5;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
margin: 50px auto;
max-width: 700px;
}
.text {
padding: 20px;
background-color: #666;
color: white;
text-align: justify;
}
.break {
word-break: break-all;
}
strong {
background-color: #000;
}
</style>
</head>
<body>
<h2>Word-break property example</h2>
<div class="container">
<h3>Text breaks inside words</h3>
<p class="text break">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem <strong>Ipsum</strong> has been the industry's standard dummy text ever since the 1500s, when an <strong>unknown</strong> printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, <strong>remaining</strong> essentially unchanged.
</p>
</div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| normal | Использует стандартные правила переноса строк. Это значение по умолчанию. |
| break-all | Разрывает строку между любыми двумя символами, независимо от переполнения. Это может затруднить чтение текста. |
| keep-all | Запрещает разрывы слов для текста CJK (китайского/японского/корейского). Для не-CJK текста поведение такое же, как у normal. |
| break-word | Устарело. Разбивает слова в произвольных местах, если в строке нет допустимых точек переноса. Вместо него используйте overflow-wrap: anywhere. |
| initial | Устанавливает для свойства значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Советы и распространённые ошибки
break-allухудшает читаемость. Поскольку это значение может разбить слово на любом символе, обычный текст становится трудночитаемым. Используйте его только там, где содержимое не является обычным текстом (коды, хеши, URL) или там, где действительно требуется заполнение каждой строки до конца.- Предпочитайте
overflow-wrapв случае «просто не допустить переполнения». Если ваша единственная цель — не дать длинному URL сломать раскладку,overflow-wrap: break-wordоставит обычные слова нетронутыми и разобьёт только проблемное слово. break-wordустарело. Значениеbreak-wordсвойстваword-breakявляется устаревшим и ведёт себя какoverflow-wrap: anywhereплюсword-break: normal. Не используйте его в новом коде — вместо этого задайтеoverflow-wrap: anywhere.keep-allпредназначено для текста CJK. Оно предотвращает разрывы внутри китайских, японских и корейских слов. Латинский текст обрабатывается какnormal, поэтому на английском контенте оно не оказывает заметного эффекта.- Комбинируйте с
hyphensдля более аккуратного текста. Если нужно, чтобы длинные слова переносились в разумных местах с дефисом, сочетайтеoverflow-wrapсhyphensвместо принудительного примененияbreak-all.
Поддержка браузерами
word-break поддерживается во всех современных браузерах. Значения normal, break-all и keep-all широко доступны; устаревшее значение break-word поддерживается для обратной совместимости, но его следует избегать.