| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 5.5+ | 1.0+ | 3.1 | 15.0+ | 2.0+ | 2.0+ |
Коротка інформація
| Значення за замовчуванням | normal |
|---|---|
| Наслідується | Так |
| Застосовується | До всіх елементів |
| Відсотковий запис | Не застосовується |
| Посилання на специфікацію | http://dev.w3.org/csswg/css3-text/#word-break |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Властивість word-break вказує, як робити перенос рядків всередині слів, які не вміщуються по ширині в задану область.
Синтаксис
word-break: normal | break-all | keep-all
Значення
- normal
- Використовуються правила переносу рядків за замовчуванням. Зазвичай, у цьому випадку рядки не переносяться або переносяться в тих місцях, де явно заданий перенос (наприклад, за допомогою тега <br>).
- break-all
- Перенос рядків додається автоматично, щоб слово вмістилося в задану ширину блоку. Значення не працює для тексту на китайській, корейській або японській мовах.
- keep-all
- Не дозволяє перенос рядків у словах на китайській, корейській або японській мовах. Для інших мов діє як normal.
Приклад
HTML5CSS3IECrOpSaFx 15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>word-break</title>
<style>
.col {
background: #f0f0f0; /* Колір фону */
width: 180px; /* Ширина блоку */
padding: 10px; /* Відступи */
word-break: break-all; /* Перенос слів */
}
</style>
</head>
<body>
<div class="col">
<p>Суттєве іменникове слово</p>
<p>високопревосходительство</p>
<p>Істотне іменникове слово</p>
<p>одинадцятокласниця</p>
<p>Хімічна речовина</p>
<p>метоксихлордіетиламінометилбутиламіноакридин</p>
</div>
</body>
</html>Результат даного прикладу показано на рис. 1.
Рис. 1. Перенос довгих слів