Свойство CSS word-wrap отвечает за перенос слов на новую строку, если оно не умещается. Поддерживается только в версии CSS3. Во всех современных браузер корректно работает.
Синтаксис CSS word-wrap
word-wrap: normal | break-word | inherit;
Где:
normal - значение по умолчанию. Если слово не умещается в блок (контейнер), то оно будет вынесено за пределы контейнера
break-word - включает перенос слов, т.е. не будет той ситуации, когда слово вылезет за пределеы отведенной области
inherit - принять значение предка (родителя)
В первом примере перенос слов будет включен, а во втором выключен.
[html]
<html>
<head>
<style>
.primer1{
width: 140px;
padding: 3px;
word-wrap: break-word;
border: 1px solid black;;
}
.primer2{
width: 140px;
padding: 3px;
word-wrap: normal;
border: 1px solid black;;
}
</style>
</head>
<body>
<div class="primer1">Пример №1. Включен перенос слов. ДлинноесловоСловоСлово</div>
<div class="primer2">Пример №2. Перенос слов выключен. ДлинноесловоСловоСлово</div>
</body>
</html>
[/html]
Код
<html> <head> <style> .primer1{ width: 140px; padding: 3px; word-wrap: break-word; border: 1px solid black;; } .primer2{ width: 140px; padding: 3px; word-wrap: normal; border: 1px solid black;; } </style> </head> <body> <div class="primer1">Пример №1. Включен перенос слов. ДлинноесловоСловоСлово</div> <div class="primer2">Пример №2. Перенос слов выключен. ДлинноесловоСловоСлово</div> </body> </html>