Свойство 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уществительное

высокопревосходительство

Одушевленное существительное

одиннадцатиклассница

Химическое вещество

Читайте также