Сегодня я расскажу о редко используемом, но чрезвычайно полезном свойстве CSS word-wrap. Вы можете перенести длинный (непрерывный) текст на новую строчку с помощью значения break-word свойства word-warp. Например, вы можете использовать его, чтобы предотвратить выход текста за пределы заданного блока и ломающего макет. Обычно это случается, когда вы используете длинный URL в боковой колонке или список комментариев. Word-warp поддерживается: IE 5.5+, Firefox 3.5+, и WebKit браузерах, таких как Chrome и Safari.
CSS: word-wrap свойство
В свойстве word-wrap можно использовать следующие значения: normal и break-word. Значение normal означает, что текст расширит границы блока. Значение break-word автоматически перенесет текст на новую строчку, границы блока не расширятся.
Значение break-word
HTML
<div class="break-word"> <h4>C break-word</h4> <p>https://vavik96.com</p> </div>
CSS
.break-word
{
word-wrap: break-word;
}
Значение normal
HTML
<div class="break-word"> <h4>Без break-word</h4> <p>http://www.dndndnzlzl_title_with_a_long_url_continue_here </p> </div>
CSS
.break-word
{
word-wrap: normal;
}
