Свойство overflow-wrap- перенос длинного слова на новую строку
Свойство overflow-wrap позволяет перенести буквы длинного слова на новую строку, если это слово не влазит в ширину контейнера.
Синтаксис
селектор {
overflow-wrap: break-word | normal;
}
Значения
| Значение | Описание |
|---|---|
| break-word | Заставляет длинные слова переносится на новую строку, если это слово не помещается в контейнер. При этом слово начнется с новой строки. |
| normal | Стандартное поведение: если длинное слово не влазит по ширине в контейнер — оно просто вылезет за его границу (при этом начнется с новой строки). |
Значение по умолчанию: normal.
Пример . Значение normal
В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы (при этом начнется с новой строки):
<div>
Lorem ipsum dolor sit amet
оооооооооооооооооооооооооооооченьдлинноеслово,
consectetur adipiscing elit.
</div>
#elem {
word-wrap: normal;
overflow-wrap: normal;
border: 1px solid red;
width: 200px;
}:
Пример . Значение break-word
А теперь те буквы, которые не помещались, просто перенесутся на следующую строку (при этом длинное слово все равно будет начинаться с новой строки):
<div>
Lorem ipsum dolor sit amet
оооооооооооооооооооооооооооооченьдлинноеслово,
consectetur adipiscing elit.
</div> #elem {
overflow-wrap: break-word;
border: 1px solid red;
width: 200px;
}
:
Смотрите также
- свойство word-break,
которое также позволяет перенести буквы длинного слова на новую строку - свойство word-wrap,
которое является устаревшим названием свойства overflow-wrap - свойство hyphens,
которое включает переносы слов по слогам - тег wbr,
который реализует мягкие переносы средствами HTML - тег br,
с помощью которого можно принудительно заставить перенести текст на новую строку
Переносы слов в HTML / Тяпк
Суровое настроящее. CSS cвойство word-break
Автоматический топорный перенос слов (без добавление дефисов).
Интересуемые значения свойства:
- break-all
Автоматический перенос всех слов, текст выглядик как выровненный по ширине. - break-word (используется на этом сайте в заголовках)
Перенос отдельных слов, которые не поместилось в заданную ширину блока.
Светлое будущее. СSS cвойство hyphens
Правила переносов определяются словарём встроенным в браузер. Свойство работает при наличии атрибута lang с кодом языка на уровне всего документа или отдельных его частей.
Интересуемые значения:
- manual (используется по умолчанию)
Слова переносятся только в тех местах текста, где добавлен спецсимвол­(мягкий перенос) или тег<wbr>. Спецсимволы вручную расставляются в тексте, не видны в обычном тексте и если слово не помещается, браузер в месте нахождения спецсимвола создаёт перенос. Спецсимвол­при переносе слова добавлять дефис (как учили в школе), а тегнет. - auto
Браузер добавляет переносы автоматически на основе встроенного словаря. До сих пор слабая поддержка браузерами, в хроме не работает(.
<html lang="en">
...
</html>
<p lang="ru">
Програм<wbr>миирование — процесс и искусство создания компьютерных программ
с помощью языков програм­мирования.
</p>p {
hyphens: auto;
}Запрет переносов
Существует обратная задача — запретить переносы. Например, не отделять инициалы от фамилии или единицы измерения от значений (100 кг). Чтобы браузер не добавлял переносы, следует вместо обычного пробела написать неразрывный пробел  
Также у CSS свойства hyphens существует значеие none, когда слова не переносятся, даже при наличии в тексте мягких переносов.
Свойство word-wrap | CSS справочник
CSS свойстваОпределение и применение
CSS свойство word-wrap указывает браузеру, переносить или нет длинные слова, которые не помещаются по ширине в заданную область (разрешается ли разрывать строки внутри слов).
Поддержка браузерами
CSS синтаксис:
word-wrap:"normal | break-word | initial | inherit";
JavaScript синтаксис:
object.style.wordWrap = "normal"
Значения свойства
| Значение | Описание |
|---|---|
| normal | Допускается переносить слова только в допустимых точках. Это значение по умолчанию. |
| break-word | Указывает, что слово может быть прервано в произвольном месте, если нет допустимой точки для разрыва. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Да.Анимируемое
Нет.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример переноса слов в CSS</title>
<style>
.test {
width: 300px; /* устанавливаем ширину блока */
word-wrap: normal; /* допускается переносить слова только в допустимых точках (значение по умолчанию) */
background: azure; /* устанавливаем цвет заднего фона */
border: 1px solid gray; /* устанавливаем сплошную границу размером 1 пиксель серого цвета */
}
.test2 {
width: 300px; /* устанавливаем ширину блока */
word-wrap: break-word; /* слово может быть прервано в произвольный месте, если нет допустимой точки для разрыва */
background: azure; /* устанавливаем цвет заднего фона */
border: 1px solid gray; /* устанавливаем сплошную границу размером 1 пиксель серого цвета */
}
</style>
</head>
<body>
<h3>Блок со значением word-wrap:normal</h3>
<div class = "test">
Самое длинное название деревни в Европе:
<a href = "https://ru.wikipedia.org/wiki/Лланвайр-Пуллгуингилл" target = "_blank" title = "Прочитать на Википедии">Лланвайрпуллгуингиллгогерихуирндробуллллантисилиогогого</a>
</div>
<h3>Блок со значением word-wrap:break-word</h3>
<div class = "test2">
Самое длинное название деревни в Европе:
<a href = "https://ru.wikipedia.org/wiki/Лланвайр-Пуллгуингилл" target = "_blank" title = "Прочитать на Википедии">Лланвайрпуллгуингиллгогерихуирндробуллллантисилиогогого</a>
</div>
</body>
</html>
word-break | htmlbook.ru
| 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>
<p>Cуществительное</p>
<p>высокопревосходительство</p>
<p>Одушевленное существительное</p>
<p>одиннадцатиклассница</p>
<p>Химическое вещество</p>
<p>метоксихлордиэтиламинометилбутиламиноакридин</p>
</div>
</body>
</html> Результат данного примера показан на рис. 1.
Рис. 1. Перенос длинных слов