текст, що випливає з div

Коли текст без пробілів і перевищує розмір div 200px, він витікає. Ширина визначається як 200px. Я помістив свій код тут 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-wrapвизначає CSS властивості або НЕ браузер повинен вставити розриви рядків усередині слів , щоб запобігти текст від переповнення його вмісту вікна.

Зі значенням, встановленим на 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; }

я нещодавно зіткнувся з цим. Я використав: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/