Когда текст без пробелов и больше, чем размер элемента div 200px, он вытекает Ширина определяется как 200px Я поместил свой код здесь http://jsfiddle.net/madhu131313/UJ6zG/ Вы можете увидеть отредактированные изображения ниже: Я хочу, чтобы текст перешел к следующая строка
Это связано с тем, что у вас есть одно длинное слово без пробелов. Вы можете использовать свойство word-wrap, чтобы текст разорвался:
#w74 { word-wrap: break-word; }
Он также имеет довольно хорошую поддержку браузера. См. документацию об этом здесь.
Использовать
white-space: pre-line;
Это предотвратит вытекание текста из div. Это сломает текст, когда он достигнет конца div.
Вы должны использовать overflow:hidden; или scroll
или с php вы можете сократить длинные слова...
Вам нужно применить следующее свойство CSS к контейнерному блоку (div):
overflow-wrap: break-word;
Согласно спецификациям (источник CSS | MDN) :
CSS-свойство
overflow-wrapуказывает, должен ли браузер вставлять разрывы строк внутри слов, чтобы текст не переполнял поле содержимого.
Со значением, установленным на break-word
Чтобы предотвратить переполнение, обычно неразрывные слова могут разрываться в произвольных точках, если в строке нет других допустимых точек разрыва.
Стоит отметить...
Первоначально это свойство было нестандартным расширением Microsoft без префикса под названием
word-wrapи было реализовано большинством браузеров с таким же именем. С тех пор он был переименован вoverflow-wrap, гдеword-wrapявляется псевдонимом.
Если вы заботитесь о поддержке устаревших браузеров, стоит указать оба:
word-wrap : break-word;
overflow-wrap: break-word;
Бывший. IE9 не распознает overflow-wrap, но отлично работает с word-wrap
используйте overflow:auto, это даст скроллер для вашего текста в пределах div :).
Если это поможет. Добавьте в селектор следующее свойство со значением:
white-space: pre-wrap;
Это помогло мне:
{word-break: break-all; }
этот трюк работает для меня:
{
word-break: break-all;
white-space: pre-wrap;
}
я недавно столкнулся с этим. Я использовал: display:block;
Если это всего лишь один экземпляр, который нужно обернуть в 2 или 3 строки, я бы просто использовал несколько <wbr> в строке. Он будет обрабатывать их так же, как <br>, но не будет вставлять разрыв строки, если в этом нет необходимости.
<div id="w74" class="dpinfo">
adsfadsadsads<wbr>fadsadsadsfadsadsa<wbr>dsfadsadsadsfadsadsads<wbr>fadsadsadsfadsadsadsfa<wbr>dsadsadsfadsadsadsfadsad<wbr>sadsfadsadsads<wbr>fadsadsadsfadsads adsfadsads
</div>
Вот скрипка.
http://jsfiddle.net/gaby_de_wilde/UJ6zG/37/
