Text aus div fließenden

Question

Wenn der Text ohne Leerzeichen und mehr als die div Größe 200px es ausströmt Die Breite ist definiert als 200px ich meinen Code gesetzt haben hier http://jsfiddle.net/madhu131313/UJ6zG/ Sie die folgenden Bilder sehen bearbeitet: ich den Text in die nächste Zeile

gehen wollen

Answer 1

Es ist aufgrund der Tatsache, dass Sie ohne Leerzeichen ein langes Wort haben. Sie können die Word-Umbruch-Eigenschaft verwenden, um den Text zu brechen:

Es hat auch ziemlich gute Browser-Unterstützung. See documentation about it here.

Answer 2

Sie sollten overflow:hidden; oder scroll

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

oder mit PHP verwenden Sie könnten kurz die langen Worte ...

Answer 3

verwenden Sie overflow:auto es wird einen Scroller zu Ihrem Text innerhalb der div geben :).

Answer 4

Wenn es nur eine Instanz ist, die über 2 oder 3 Zeilen gewickelt werden muss, würde ich einfach ein paar <wbr> in der Zeichenfolge verwenden. Es behandelt diejenigen wie <br>, aber es wird den Zeilenumbruch nicht einfügen, wenn es nicht notwendig 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/

Answer 5

Verwenden

white-space: pre-line; 

Es wird Text verhindern, dass aus dem div fließt. Es wird den Text brechen, wenn es das Ende der div erreicht.

Answer 6

ich vor kurzem angetroffen. Früher habe ich: display:block;

Answer 7

Sie benötigen die folgende CSS-Eigenschaft auf den Container-Block (div) anzuwenden:

overflow-wrap: break-word; 

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

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

Mit dem Wert auf break-world

Überlauf zu vermeiden, normalerweise unzerbrechlich Worte können an beliebigen Punkten gebrochen werden, wenn es nicht anders annehmbare Bruchstellen in der Linie sind.

Erwähnenswert ...

Das Anwesen war ursprünglich eine Nicht-Standard und ohne Präfix Microsoft Erweiterung word-wrap genannt, und wurde von den meisten Browsern mit dem gleichen Namen umgesetzt. Es wurde seitdem in overflow-wrap umbenannt, wobei word-wrap ein Alias ​​ist.

---

Wenn Sie ältere Browser Pflege unterstützen, es lohnt sich sowohl die Angabe:

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

Ex. IE9 erkennt nicht overflow-wrap aber funktioniert gut mit word-wrap