Как ограничить ширину текста

Я хотел бы ограничить ширину блока текста, чтобы он выглядел так, как будто у него есть br в каждой строке.

Что-то вроде этого:

Texttttttttttttttttttttt
tttttttttttttttttttttttt
tttttttttttttttttttttttt

Из этого:

Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt

Я попытался указать div или p ширину, но это не сработало для меня. Любые предложения?

Ответы

Ответ 1

Вы можете применить css следующим образом:

div {
   word-wrap: break-word;
   width: 100px;
}

Обычно браузер не разбивает слова, но word-wrap: break-word; заставит его сломать слова.

Демо: http://jsfiddle.net/Mp7tc/

Дополнительная информация о word-wrap

Ответ 2

Вы можете использовать word-wrap : break-word;

Ответ 3

 display: inline-block;
max-width: 80%;
height: 1.5em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Ответ 4

использовать свойство css word-wrap: break-word;

см. пример здесь: http://jsfiddle.net/emgRF/

Ответ 5

Я думаю, что вы пытаетесь сделать длинный текст без пробелов.

посмотрите на это: Hyphenator.js и demo.

Ответ 6

Try

<div style="max-width:200px; word-wrap:break-word;">Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</div>

Ответ 7

Попробуйте следующее:

<style> 
p
{
    width:100px; 
    word-wrap:break-word;
}
</style>

<p>Loremipsumdolorsitamet,consecteturadipiscingelit.Fusce non nisl
non ante malesuada mollis quis ut ipsum. Cum sociis natoque penatibus et magnis dis 
parturient montes, nascetur ridiculus mus. Cras ut adipiscing dolor. Nunc congue, 
tellus vehicula mattis porttitor, justo nisi sollicitudin nulla, a rhoncus lectus lacus 
id turpis. Vivamus diam lacus, egestas nec bibendum eu, mattis eget risus</p>

Ответ 8

<style>
     p{
         width:     70%
         word-wrap: break-word;
     }
</style>

Это не работало в моем случае. Он отлично работал после добавления следующего стиля.

<style>
     p{
        width:     70%
        word-break: break-all;
     }
</style>