Свойство overflow-wrap

Определяет, должен ли браузер вставлять разрывы строк в неразрывную строку, если достигнут конец строки элемента

overflow-wrap: break-word;
  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Значения

overflow-wrap: normal;

Обычное поведение строки. Строка будет обрываться только в обычных точках разрыва строки

<style>
.example-1 {
    width: 300px;
    padding: 5px;
    overflow-wrap: normal;
    background: #55bb61;
}
</style>
<div class="example-1">csscscsscsscsscsscsscsscsscsscsscsscsscsscsscsscssscsscsscss</div>
csscscsscsscsscsscsscsscsscsscsscsscsscsscsscsscssscsscsscss
overflow-wrap: break-word;

Слово будет разбито и перенесено на новую строку в том месте, где достигло окончания строки

<style>
.example-2 {
    width: 300px;
    padding: 5px;
    overflow-wrap: break-word;
    background: #55bb61;
}
</style>
<div class="example-2">csscscsscsscsscsscsscsscsscsscsscsscsscsscsscsscssscsscsscss</div>
csscscsscsscsscsscsscsscsscsscsscsscsscsscsscsscssscsscsscss

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

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии