word-wrap
Поддержка браузерами
| 12.0+ | 5.5+ | 3.5+ | 4.0+ | 10.5+ | 3.1+ |
Описание
CSS свойство word-wrap указывает, разрешается ли браузеру разрывать строки прямо внутри слов.
Помимо переноса на новую строку длинных слов или URL-адресов, свойство word-wrap удобно применять для решения следующих задач:
- форматирование данных в таблицах, для того чтобы ячейки не растягивались в ширину и не искажали макет страницы
- перенос строк кода внутри элементов <pre>
| Значение по умолчанию: | normal |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | нет |
| Наследуется: | да |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.wordWrap="break-word" |
Синтаксис
word-wrap: normal|break-word|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| normal | Разрешает переносить слова только в заданных местах. |
| break-word | Переносит слово при необходимости автоматически. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
p.test {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;
}
</style>
</head>
<body>
<p class="test">Абзац содержит очень длинное слово: этооченьоченьоченьоченьдлинноеслово,
которое будет разорвано и перенесено на другую строку.</p>
</body>
</html>
Результат данного примера в окне браузера:
