Свойство 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