html.okpython.net
Основы создания сайтов
CSS :: Свойство word-break
css-свойство word-break (от англ. word break – разрыв слова) указывает браузеру, как нужно вставлять переносы строк внутри слов, если они не помещаются по ширине в родительском элементе.
Характеристики
- Значение по умолчанию: normal.
- Применяется: ко всем элементам.
- Наследуется: да.
- Анимируется: нет.
- JavaScript: object.style.wordBreak="value".
Синтаксис
word-break: normal | break-all | keep-all
Значения
- normal – строки переносятся как обычно.
- break-all – если очередное слово не будет полностью помещаться в заданную ширину блока, то браузер будет переносить оставшуюся часть слова на новую строку. Значение не работает для текста на китайском, корейском или японском языке.
- keep-all – не разрешается перенос строк в словах на китайском, корейском или японском языке. При этом для остальных языков действует как normal.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-text-3/#propdef-word-break
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/word-break
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ width: 250px; margin: 3em; } .p_1{ word-break: normal; background-color: yellow; } .p_2{ word-break: break-all; background-color: green; } </style> </head> <body> <p class="p_1"> Слова переносятся на новую строку целиком, как обычно короче. Парапапарампрарампарарарарарарарам. </p> <p class="p_2"> Если слово не помещается в заданные размеры по ширине, то его часть переносится на другую строку. Парапапарампрарампарарарарарарарам. </p> </body> </html>
Пример №1