testo scorre fuori div

Question

Quando il testo è senza spazi e più rispetto alla dimensione div 200px è che scorre fuori La larghezza è definita come 200px Ho posto il mio codice qui http://jsfiddle.net/madhu131313/UJ6zG/ Potete vedere le immagini qui sotto modificati: voglio che il testo per passare alla riga successiva

Answer 1

E 'a causa del fatto che si dispone di una sola parola a lungo senza spazi. È possibile utilizzare la proprietà wrap di testo per interrompere il testo:

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

Ha anche un discreto supporto del browser. See documentation about it here.

Answer 2

Si dovrebbe usare overflow:hidden; o scroll

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

o con php si potrebbe brevi le parole lunghe ...

Answer 3

utilizzare overflow:auto darà uno scroller al testo all'interno dello div :).

Answer 4

Se è solo un'istanza che deve essere racchiusa su 2 o 3 righe, utilizzare solo alcuni <wbr> nella stringa. Tratterà quelli come <br> ma non inserirà l'interruzione di riga se non è necessario.

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

Ecco un violino.

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

Answer 5

Usa

white-space: pre-line; 

Sarà impedire che il testo che scorre fuori dal div. Interromperà il testo non appena raggiunge la fine dello div.

Answer 6

l'ho incontrato di recente. Ho usato: display:block;

Answer 7

È necessario applicare le seguenti proprietà CSS al blocco contenitore (div):

overflow-wrap: break-word; 

Secondo le specifiche (fonte CSS | MDN):

La proprietà overflow-wrap CSS specifica se il browser deve inserire interruzioni di riga all'interno delle parole per impedire che il testo trabocchi dalla sua casella di contenuto.

Con il valore impostato break-world

Per evitare overflow, normalmente parole infrangibili possono essere suddivisi in punti arbitrari se non vi sono tuttavia punti di rottura accettabili nella linea.

Da segnalare ...

La struttura era in origine un'estensione di Microsoft non standard e senza prefisso chiamato word-wrap, ed è stato attuato dalla maggior parte dei browser con lo stesso nome. Da allora è stato rinominato in overflow-wrap, con word-wrap è un alias.

---

Se vi preoccupate per i browser legacy supportano vale la pena specificando:

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

Ex. IE9 non riconosce overflow-wrap ma funziona bene con word-wrap