текст, изтичащ от div

Когато текстът е без интервали и повече от размера на div 200px той изтича Ширината е определена като 200px Поставих кода си тук http://jsfiddle.net/madhu131313/UJ6zG/ Можете да видите снимките по-долу редактирани: Искам текстът да отиде на следващия ред

въведете описание на изображението тук

въведете описание на изображението тук


person madhu131313    schedule 30.08.2012    source източник


Отговори (10)


Това се дължи на факта, че имате една дълга дума без интервали. Можете да използвате свойството word-wrap, за да предизвикате прекъсване на текста:

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

Има и доста добра поддръжка на браузъра. Вижте документация за това тук.

person chipcullen    schedule 30.08.2012
comment
не работи за мен ето е още един пример. - person Deepak Vaishnav; 03.07.2018
comment
това е страхотно, реши някои проблеми в отзивчивата страница - person yussan; 06.10.2018
comment
word-break: break-all Това ме спаси - person Pedro Silva; 28.07.2021
comment
Този не работи за имейл шаблони. Вместо това трябва да използвате word-break:break-all. - person Berni; 04.08.2021

Използвайте

white-space: pre-line;

Това ще предотврати изтичането на текст от div. Ще прекъсне текста, когато стигне до края на div.

person Nixon    schedule 30.12.2014

Трябва да използвате overflow:hidden; или scroll

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

или с php можете да съкратите дългите думи...

person Community    schedule 30.08.2012
comment
Страхотно.съжалявам да спомена, че искам да отиде на следващия ред като чат в gmail или чат във facebook :) - person madhu131313; 30.08.2012
comment
След това можете да използвате версията на @chipcullen с пренасяне на думи! демонстрация: jsfiddle.net/UJ6zG/3 - person ; 30.08.2012

Трябва да приложите следното 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

person Paolo    schedule 14.01.2018

използвайте overflow:auto, това ще даде скролер на вашия текст в рамките на div :).

person Rahul Razdan    schedule 30.08.2012

Ако това помогне. Добавете следното свойство със стойност към вашия селектор:

white-space: pre-wrap;
person Martin Lloyd Jose    schedule 06.04.2018

Това свърши работа за мен:

{word-break: break-all; }

person Addo    schedule 20.12.2019
comment
благодаря ви много, това беше единственото нещо, което работеше за мен (използване на стилизирани компоненти в React) - person mlz7; 28.02.2020
comment
да, това работи за мен, тъй като думата ще продължи на следващия ред - person Om Fuke; 16.02.2021

този трик работи за мен:

{
  word-break: break-all;
  white-space: pre-wrap;
}

white-space
прекъсване на думи

person Muhammed Moussa    schedule 04.04.2021

наскоро се сблъсках с това. Използвах: display:block;

person arn-arn    schedule 30.03.2016

Ако това е само един екземпляр, който трябва да бъде обвит в 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/

person gaby de wilde    schedule 27.01.2014