Свойство word-wrap
Описание
Указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область.
Синтаксис
word-wrap: normal | break-word;| Значение | Описание |
| normal | Строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью br). |
| break-word | Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.col {
outline: 3px solid rgb(255, 0, 204);
width: 230px;
padding: 10px;
word-wrap: break-word;
}
</style>
<div class='col'>
<p>Cуществительное</p>
<p>высокопревосходительство</p>
<p>Одушевленное существительное</p>
<p>одиннадцатиклассница</p>
<p>Химическое вещество</p>
</div>
<style>
.col2 {
outline: 3px solid rgb(255, 0, 204);
width: 230px;
padding: 10px;
word-wrap: normal;
}
</style>
<div class='col2'>
<p>Cуществительное</p>
<p>высокопревосходительство</p>
<p>Одушевленное существительное</p>
<p>одиннадцатиклассница</p>
<p>Химическое вещество</p>
</div>
</body>
</html>Cуществительное
высокопревосходительство
Одушевленное существительное
одиннадцатиклассница
Химическое вещество
Cуществительное
высокопревосходительство
Одушевленное существительное
одиннадцатиклассница
Химическое вещество
Читайте также
Свойство border-right
Позволяет одновременно установить толщину, стиль и цвет правой границы элемента.<br><br&...
Свойство max-height
Устанавливает максимальную высоту элемента.<br><br>Значение высоты элемента будет выч...
Свойство border-top-color
Устанавливает цвет нижней границы элемента.
Стиль последнего элемента определённого типа
Псевдокласс :last-of-type задаёт стиль последнего элемента определённого типа в группе братских э...
Стиль последнего элемента определённого типа
Псевдокласс :last-of-type задаёт стиль последнего элемента определённого типа в группе братских э...