| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 10.5+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ |
Коротка інформація
| Значення за замовчуванням | normal |
|---|---|
| Успадковується | Так |
| Застосовується | До всіх елементів |
| Відсоткова форма | Не застосовується |
| Посилання на специфікацію | http://www.w3.org/TR/css3-text/#word-wrap |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Властивість word-wrap вказує, переносити або ні довгі слова, які не вміщаються в задану область. Ця властивість є концептуальною і при валідації документа на CSS3 видає помилку.
Синтаксис
word-wrap: normal | break-word | inherit
Значення
- normal
- Рядки не переносяться або переносяться в тих місцях, де явно задано перенос (наприклад, за допомогою тега <br>).
- break-word
- Перенос рядків додається автоматично, щоб слово вмістилося в задану ширину блоку.
- inherit
- Наслідує значення батька.
Приклад
HTML5CSS2.1CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>word-wrap</title>
<style>
.col {
background: #f0f0f0; /* Колір фону */
width: 230px; /* Ширина блоку */
padding: 10px; /* Відступи */
font-size: 1.5em; /* Розмір шрифту */
word-wrap: break-word; /* Перенос слів */
}
</style>
</head>
<body>
<div class="col">
<p>Существительное</p>
<p>высокопревосходительство</p>
<p>Одушевленное существительное</p>
<p>одиннадцатиклассница</p>
<p>Химическое вещество</p>
<p>метоксихлордиэтиламинометилбутиламиноакридин</p>
</div>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Рис. 1. Перенос довгих слів