текст вытекает из div

Когда текст без пробелов и больше, чем размер div 200 пикселей, он вытекает. Ширина определена как 200 пикселей. Я поместил свой код здесь http://jsfiddle.net/madhu131313/UJ6zG/. Вы можете увидеть отредактированные изображения ниже : Я хочу текст для перехода на следующую строку

Это связано с тем, что у вас есть одно длинное слово без пробелов. Вы можете использовать word-wrapсвойство, чтобы разбить текст:

#w74 { word-wrap: break-word; }

Он также имеет неплохую поддержку браузером. См. Документацию об этом здесь .

Использовать

white-space: pre-line;

Это предотвратит вытекание текста из div. Текст будет разорван, когда он достигнет конца div.

Вы должны использовать overflow:hidden; илиscroll

http://jsfiddle.net/UJ6zG/1/

или с помощью php вы могли бы сократить длинные слова ...

Вам необходимо применить следующее свойство CSS к блоку контейнера (div):

overflow-wrap: break-word;

Согласно спецификациям (источник CSS | MDN ):

Свойство overflow-wrapCSS указывает, должен ли браузер вставлять разрывы строк в словах, чтобы текст не переполнял его поле содержимого.

Если установлено значение break-word

Чтобы предотвратить переполнение, обычно неразрывные слова могут быть разорваны в произвольных точках, если в строке нет приемлемых точек разрыва.

Стоит отметить...

Изначально это свойство было нестандартным расширением Microsoft без префикса word-wrapи было реализовано в большинстве браузеров с таким же именем. С тех пор она была переименована в overflow-wrap, с word-wrapбудучи псевдонимом.

Если вам важна поддержка устаревших браузеров, стоит указать оба:

word-wrap    : break-word;
overflow-wrap: break-word;

Ex. IE9 не распознает, overflow-wrapно отлично работает сword-wrap

используйте overflow:autoего, чтобы прокрутить ваш текст внутри div:).

Если это поможет. Добавьте в селектор следующее свойство со значением:

white-space: pre-wrap;

Это помогло мне:

{word-break: break-all; }

я недавно столкнулся с этим. Я использовал: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/