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

98

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

введите описание изображения здесь

введите описание изображения здесь

мадху131313
источник

Ответы:

175

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

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

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

чипкулен
источник
3
у меня это не сработало, вот еще один пример.
Deepak Vaishnav
Это круто, решена проблема на
адаптивной
Какое чистое и простое решение. Спасибо, что поделились этим.
Дзенис Х.
109

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

white-space: pre-line;

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

Никсон
источник
28

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

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

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


источник
Awesome. Извините, я хочу, чтобы он перешел на следующую строку, например чат
Gmail
Тогда вы можете использовать версию @chipcullen с переносом слов! демо: jsfiddle.net/UJ6zG/3
8

Вам необходимо применить следующее свойство 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

Паоло
источник
Спасибо, у меня сработало. Вы написали «Со значением, установленным на break-world» - я почти уверен, что вы имели в виду «break-word» без «l», надеюсь, вы не хотели разрушить мир;)
Джейк Нойманн
7

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

Рахул Раздан
источник
4

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

white-space: pre-wrap;
Мартин Ллойд Хосе
источник
2

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

{word-break: break-all; }

Аддо
источник
1
Большое спасибо, это единственное, что сработало для меня (с использованием styled-components в React)
mlz7
0

я недавно столкнулся с этим. Я использовал:display:block;

арн-арн
источник
-6

Если это только один экземпляр, который нужно обернуть на 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/

Габи де Уайлд
источник