Свойство CSS word-wrap

Свойство CSS word-wrap отвечает за перенос слов на новую строку, если оно не умещается. Поддерживается только в версии CSS3. Во всех современных браузер корректно работает.

Синтаксис CSS word-wrap

word-wrap: normal | break-word | inherit;

Где:

  • normal – значение по умолчанию. Если слово не умещается в блок (контейнер), то оно будет вынесено за пределы контейнера
  • break-word – включает перенос слов, т.е. не будет той ситуации, когда слово вылезет за пределеы отведенной области
  • inherit – принять значение предка (родителя)

Примеры перенос слов в html

В первом примере перенос слов будет включен, а во втором выключен.

<html>
<head>
<style>
.primer1{
width: 140px;
padding: 3px;
word-wrap: break-word;
border: 1px solid black;;
}
.primer2{
width: 140px;
padding: 3px;
word-wrap: normal;
border: 1px solid black;;
}
</style>
</head>
<body>
<div class="primer1">Пример №1. Включен перенос слов. ДлинноесловоСловоСлово</div>
<div class="primer2">Пример №2. Перенос слов выключен. ДлинноесловоСловоСлово</div>
</body>
</html>





Вот как это выглядит на странице:

Пример №1. Включен перенос слов. ДлинноесловоСловоСлово

Пример №2. Перенос слов выключен. ДлинноесловоСловоСлово

В целом польза от свойства word-wrap есть. Например, в комментариях некоторые пользователи могут размещать длинные слова. Итогом такого баловства может быть то, что весь дизайн поедет.




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

• Свойство text-align

• Свойство font

• Свойство white-space

• Свойство transform

• Свойство text-transform

• Свойство transform-origin

• Свойство css border

• Свойство css background

• Свойство css transition

• Свойство nth-child

• Свойство overflow

• Свойство text-indent


← Перейти в каталог CSS уроков

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

Copy Protected by Chetan's WP-Copyprotect.