Свойство word-break

Определяет, где будет установлен перевод на новую строку в случае превышения текстом границ блока

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

Значения

word-break: normal;

Обычное поведение перевода строк

word-break: break-all;

При превышении границ блока, перевод строки будет вставлен между любыми двумя символами (за исключением текста на китайском/японском/корейском языке).

В отличие от word-break: break-word; и overflow-wrap: break-word; word-break: break-all; вставит перевод строки в том месте, где текст будет превышать занимаемый им блок (даже в том случае, когда текст можно перенести по словам).

<style>
.example-1 {
    word-break: break-all;
}
</style>

<div class="example-1">
    <p>Определяет, где будет установлен перевод на новую строку в случае превышения текстом границ блока.</p>
    <p>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
</div>

Определяет, где будет установлен перевод на новую строку в случае превышения текстом границ блока.

sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

word-break: break-word;

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

<style>
.example-3 {
    word-break: break-word;
}
</style>

<div class="example-3">
    <p>Определяет, где будет установлен перевод на новую строку в случае превышения текстом границ блока.</p>
    <p>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
</div>

Определяет, где будет установлен перевод на новую строку в случае превышения текстом границ блока.

sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

word-break: keep-all;

Перевод строки не будет использован в тексте на китайском/японском/корейском языке. Для текста на других языках будет применено поведение по умолчанию normal

<style>
.example-2 {
    word-break: keep-all;
}
</style>

<div class="example-2">
    <p>Определяет, где будет установлен перевод на новую строку в случае превышения текстом границ блока.</p>
    <p>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
</div>

Определяет, где будет установлен перевод на новую строку в случае превышения текстом границ блока.

sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

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

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

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