Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Свойство word-break

Дата:17.10.15 в 12:34
Справочник: 

Характеристики свойства

В каких браузерах работает?

5.5+ 1.0+ - 3.1+ 15.0+ 2.0+ 2.0+

В каких версиях CSS используется?

CSS 1 CSS 2 CSS 2.1 CSS 3
- - - +

Для чего используется?

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

Как правильно задавать?

word-break: способ переноса;

Какие могут быть значения?

  • normal - особые свойства переносу не задаются, процедура осуществляется общепринятым способом.
  • break-all - процесс переноса осуществляется без участия пользователя, главным приоритетом в этом случае является то, чтобы слово не вышло за пределы контейнера.
  • keep-all - запрещает для дальневосточных языков, таких как японский, перенос слова со строчки на строчку. На другие языки не распространяется.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство word-break</title>
  <style>
   .word { 
    background: #5877b4;
    color:#fff;	
    width: 220px; 
    padding: 5px; 
    word-break: break-all; 
   }
  </style>
 </head>
 <body> 
  <div class="word">
   <p>метоксихлордиэтиламинометилбутиламиноакридин</p>
  </div>
 </body>
</html>

По итогу получаем

word-break

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: