Text fließt aus div

Wenn der Text ohne Leerzeichen und mehr als die Div-Größe 200px ist, fließt er heraus. Die Breite ist als 200px definiert. Ich habe meinen Code hier eingegeben. Http://jsfiddle.net/madhu131313/UJ6zG/ Sie können die folgenden Bilder bearbeitet sehen : Ich möchte den Text, um zur nächsten Zeile zu gelangen

Es liegt an der Tatsache, dass Sie ein langes Wort ohne Leerzeichen haben. Sie können die word-wrapEigenschaft verwenden, um den Text zu beschädigen:

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

Es hat auch ziemlich gute Browser-Unterstützung. Siehe Dokumentation dazu hier .

Verwenden

white-space: pre-line;

Dadurch wird verhindert, dass Text aus dem Textfeld fließt div. Der Text wird am Ende des Textes unterbrochen div.

Sie sollten overflow:hidden; oder verwendenscroll

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

oder mit php könnte man die langen wörter kurz fassen ...

Sie müssen die folgende CSS-Eigenschaft auf den Containerblock (div) anwenden:

overflow-wrap: break-word;

Gemäß den Spezifikationen (Quelle CSS | MDN ):

Die overflow-wrapCSS-Eigenschaft gibt an, ob der Browser Zeilenumbrüche in Wörter einfügen soll, um zu verhindern, dass Text über das Inhaltsfeld läuft.

Mit dem Wert auf break-word

Um ein Überlaufen zu verhindern, können normalerweise unzerbrechliche Wörter an beliebigen Punkten unterbrochen werden, wenn die Zeile keine ansonsten akzeptablen Unterbrechungspunkte enthält.

Erwähnenswert...

Die Eigenschaft war ursprünglich eine nicht standardmäßige und nicht vordefinierte Microsoft-Erweiterung namens word-wrapund wurde von den meisten Browsern mit demselben Namen implementiert. Es ist seit umbenannt worden overflow-wrapmit, word-wrapist ein Alias.

Wenn Sie sich für die Unterstützung älterer Browser interessieren, sollten Sie beides angeben:

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

Ex. IE9 erkennt nicht overflow-wrap, funktioniert aber gut mitword-wrap

Wenn overflow:autoSie es verwenden, erhalten Sie einen Scroller für Ihren Text innerhalb des div:).

Wenn das hilft. Fügen Sie Ihrer Auswahl die folgende Eigenschaft mit Wert hinzu:

white-space: pre-wrap;

Das hat den Trick für mich getan:

{word-break: break-all; }

Ich bin vor kurzem darauf gestoßen. Ich benutzte:display:block;

Wenn es nur eine Instanz ist, die über 2 oder 3 Zeilen umbrochen werden muss, würde ich nur einige <wbr>in der Zeichenfolge verwenden. Diese werden genauso behandelt, <br>aber der Zeilenumbruch wird nicht eingefügt, wenn dies nicht erforderlich ist.

<div id="w74" class="dpinfo">
adsfadsadsads<wbr>fadsadsadsfadsadsa<wbr>dsfadsadsadsfadsadsads<wbr>fadsadsadsfadsadsadsfa<wbr>dsadsadsfadsadsadsfadsad<wbr>sadsfadsadsads<wbr>fadsadsadsfadsads adsfadsads
</div>

Hier ist eine Geige.

http://jsfiddle.net/gaby_de_wilde/UJ6zG/37/