Когато текстът е без интервали и повече от размера на div 200px той изтича Ширината е определена като 200px Поставих кода си тук http://jsfiddle.net/madhu131313/UJ6zG/ Можете да видите снимките по-долу редактирани: Искам текстът да отиде на следващия ред
текст, изтичащ от div
Отговори (10)
Това се дължи на факта, че имате една дълга дума без интервали. Можете да използвате свойството 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) :
Свойството
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; }
този трик работи за мен:
{
word-break: break-all;
white-space: pre-wrap;
}
white-space
прекъсване на думи
наскоро се сблъсках с това. Използвах: 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/