word-break – Свойство определяет, где будет установлен перевод на новую строку в случае превышения текстом границ блока.
Значение свойства – word-break:
normal – Слова разбиваются в соответствии с их обычными правилами.
.normal {word-break: normal;}break-all – Разрыв разрешен внутри слов: в частности, в дополнение к возможностям мягкого переноса, разрешенным для обычных , любых типографских буквенных единиц.
.break-all {word-break: break-all;}keep-all – Перевод строки будет использован как по умолчанию (normal, выходит за границы блока.
.keep-all {word-break: keep-all;}Пример:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Перенос слов - word-break</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h1 {
color: blue;
}
h3 {
color: green;
}
p {
font-size: 14pt;
border: 1px solid black;
width: 100px; }
.normal {
word-break: normal;}
.break-all {
word-break: break-all;}
.keep-all {
word-break: keep-all;}
</style>
</head>
<body>
<h1>Перенос слов - word-break</h1>
<h3>word-break: normal</h3>
<p class="normal">Текст оченьоченьдлинныйтекст</p>
<h3> word-break: break-all</h3>
<p class="break-all narrow">Текст оченьоченьдлинныйтекст</p>
<h3> word-break: keep-all</h3>
<p class="keep-all">Текст оченьоченьдлинныйтекст</p>
</body>
</html>Перенос слов - word-break
