CSS свойство word-wrap - httpdoc.ru

CSS Word Wrap

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

Значения свойств переноса слов

Ценить Описание
обычный Это значение по умолчанию. Он прерывает строку только в разрешенных точках разрыва. Он не разбивает слова между ними.
слово-слово Это позволяет разбивать длинные слова в зависимости от доступного места.
исходный Он устанавливает для этого свойства значение по умолчанию.
наследовать Он наследует свойство от своего родительского элемента.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Word Wrap </title> 
  <meta charset="UTF-8">
<style> 
 .test {
   width: 11em; 
   border: 1px solid #000000;
   word-wrap: break-word;
}
 .test1 {
   width: 11em; 
   border: 1px solid #000000;
}
</style>
</head>
<body>
<h2>With Word Wrap</h2>
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. 
The long word will break and wrap to the next line.</p>

<h2>Without Word Wrap</h2>
<p class="test1"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.
 The long word will break and wrap to the next line.</p>

</body>
</html>

Выход

CSS Word Wrap

С переносом слов

Этот абзац содержит очень длинное слово: это очень-очень-очень-очень-очень длинное слово. Длинное слово прерывается и переносится на следующую строку.

Без переноса слов

Этот абзац содержит очень длинное слово: это очень-очень-очень-очень-очень длинное слово. Длинное слово прерывается и переносится на следующую строку.


Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Word Wrap </title> 
  <meta charset="UTF-8">
<style>   
.test {  
    width: 15em;  
    background-color: #99d867bd;   
    border: 1px solid red;  
    padding:10px;  
    word-wrap: break-word;  
}  
</style>  
</head>  

<body>  
<p class="test"> In this paragraph, there is a very long word:  
 iamsooooooooooooooooooooooooooooooolongggggggggggggggg.The long word will break and wrap to the next line.</p>  
</body>  
</html>

Выход

CSS Word Wrap

В этом абзаце есть очень длинное слово: iamsooooooooooooooooooooooooooooolongggggggggggggggg. Длинное слово прерывается и переносится на следующую строку.


Поддержка браузера

Элемент
Microsoft Edge browser.png Край
Chrome browser.png Хром
Firefox browser.png Fire Fox
Opera browser.png Опера
safari browser.png Сафари
word-wrap
5.5
4.0
3.5
10,5
3.1