Перейти к содержанию

word-break

Свойство word-break указывает, как делать перенос строк внутри слов, которые не помещаются по ширине в заданную область.

Демо

Текст

Синтаксис

1
2
3
4
5
6
7
8
word-break: normal;
word-break: break-all;
word-break: keep-all;

/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;

Значения

normal

Используются правила переноса строк по умолчанию. Как правило, в этом случае строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью <br>).

break-all

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

keep-all

Не разрешает перенос строк в словах на китайском, корейском или японском языке. Для остальных языков действует как normal.

Значение по-умолчанию: normal

Применяется ко всем элементам

Спецификации

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

Can I Use word-break? Data on support for the word-break feature across the major browsers from caniuse.com.

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>word-break</title>
        <style>
            .col {
                background: #f0f0f0; /* Цвет фона */
                width: 180px; /* Ширина блока */
                padding: 10px; /* Поля */
                word-break: break-all; /* Перенос слов */
            }
        </style>
    </head>
    <body>
        <div class="col">
            <p>Cуществительное</p>
            <p>высокопревосходительство</p>
            <p>Одушевленное существительное</p>
            <p>одиннадцатиклассница</p>
            <p>Химическое вещество</p>
            <p>
                метоксихлордиэтиламинометилбутиламиноакридин
            </p>
        </div>
    </body>
</html>

Комментарии