Властивість word-break вказує, як робити перенесення рядків всередині слів, які не поміщаються по ширині у задану область.
Коротка інформація
| Значення за замовчуванням | normal |
|---|---|
| Успадковується | Так |
| Застосовується | До всіх елементам |
| Анімується | Ні |
Синтаксис
<code>word-break: normal | break-all | keep-all
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися у зазначеному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
- normal
- Використовуються правила перенесення рядків за замовчуванням. Як правило, у цьому випадку рядки не переносяться або переносяться в тих місцях, де явно задано перенесення (наприклад, за допомогою <br>).
- break-all
- Перенесення рядків додається автоматично, щоб слово помістилося в задану ширину блоку. Значення не працює для тексту китайською, корейською або японською мовою.
- keep-all
- Не дозволяє переносити рядки в словах китайською, корейською або японською мовами. Для інших мов діє як normal.
Приклад
<!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. Перенесення довгих слів
Об'єктна модель
Об'єкт.style.wordBreak
Примітка
Chrome до версії 44, Opera до версії 31, Safari до версії 9, Android та Opera Mobile не підтримують значення keep-all.
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Text Module Level 3 | Робочий проект |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation ( Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| 5.5 | 12 | 1 | 44 | 15 | 31 | 3.1 | 9 | 15 |
| 2.1 | 15 | 37 | 3.2 | 9.2 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями ;
- — властивість браузером не сприймається і ігнорується;
- — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації.
Автор та редактори
Остання модифікація: 29.08.2017Редактори: Влад Мержевич