Envoltura de texto con CSS

Question

Tengo una cadena de números mucho más larga generada aleatoriamente. Lo estoy mostrando en un bloque div. Como es una cadena larga mucho más larga. Está siendo escrito en una sola línea.

Por ejemplo:

String str="13,7,5,1,10,7,18,11,17,10,9,16,17,9,6,19,6,13,2,18,6,9,8,5,15,4,17,16,12,8,19,16,5,9,6,16,16,5,16,12,0,14,7,11,12,11,12,16,8,3,16,3,1,10,4,14,5,9,4,3,8,3,0,19,5,7,8,7,13,14,4,3,12,6,5,19,17,3,3,19,0,4,14,8,15,17,14,5,9,3,9,19,18,8,10,0,6,1,18,16,3,16,10,9,15,10,4,7,1,7,11,6,11,16,4,11,10,1,0,15,16,19,6,15,18,14,16,16,5,17,9,19,12,7,14,14,11,19,18,10,9,5,11,2,9,0,3,15,14,1,7,14,12,17,1,10,14,5,17,16,19,10,12,6,19,16,5,19,10,9,18,14,11,9,1,18,0,10,0,19,7,17,2,4,14,2,1,3,9,17,11,7,12,4,7,5,17,2,1,6,19,14,5,3,2,6"; 

<div id='row' style='width:100px;height:500px;'> 

</div> 

He establecer la anchura fija al bloque div. Quiero mostrar esta cadena más larga en varias filas, en lugar de mostrar en una línea.

Probé css 'text-wrap:normal'. No funciona En realidad, esta propiedad no funciona en todos los navegadores.

Answer 1

uso word-wrap:break-word; el estilo css:

<div id='row' style='word-wrap:break-word;'> 
13,7,5,1,10,7,18,11,17,10,9,16,17,9,6,19,6,13,2,18,6,9,8,5,15,4,17,16,12,8,19,16,5,9,6,16,16,5,16,12,0,14,7,11,12,11,12,16,8,3,16,3,1,10,4,14,5,9,4,3,8,3,0,19,5,7,8,7,13,14,4,3,12,6,5,19,17,3,3,19,0,4,14,8,15,17,14,5,9,3,9,19,18,8,10,0,6,1,18,16,3,16,10,9,15,10,4,7,1,7,11,6,11,16,4,11,10,1,0,15,16,19,6,15,18,14,16,16,5,17,9,19,12,7,14,14,11,19,18,10,9,5,11,2,9,0,3,15,14,1,7,14,12,17,1,10,14,5,17,16,19,10,12,6,19,16,5,19,10,9,18,14,11,9,1,18,0,10,0,19,7,17,2,4,14,2,1,3,9,17,11,7,12,4,7,5,17,2,1,6,19,14,5,3,2,6 
</div>​ 

LIVE Demo

MDN docs:

La propiedad CSS de ajuste de palabras se usa para especificar si el navegador puede o no romper líneas dentro de palabras para evitar el desbordamiento cuando una cadena irrompible es demasiado larga para caber.

Sobre el text-wrap que ha intentado: No pude encontrar en MDN, pero encontré esto en w3school:

"El ajuste del texto propiedad no es compatible con cualquiera de las principales navegadores ".

Answer 2

Escribir word-wrap:break-word en .row DIV css. Escribe así:

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

Marque esta http://jsfiddle.net/Rfc2j/1/

Answer 3

sólo tiene que utilizar word-wrap: break-word

ejemplo violín: http://jsfiddle.net/Rfc2j/

Answer 4

Uso word-wrap:break-word; propiedad en lugar de text-wrap:normal

Answer 5

Generar un espacio después de cada coma. Tal presentación es normal en los lenguajes humanos, y también mejora la legibilidad de las secuencias numéricas (aunque me pregunto para qué se genera, ¿por qué se necesitaría?). Puede ajustar la cantidad de espaciado configurando word-spacing en un valor negativo.

Si no quiere ningún espacio por alguna razón, genere la etiqueta <wbr> después de cada coma. Fruncido el ceño por los escritores de normas (excepto HTML5), pero prácticamente universalmente admitido por los navegadores. Sin embargo, para cubrir algunas rarezas modernas (en IE y Opera), agregue lo siguiente a su hoja de estilo: wbr:after { content: "\00200B"; }.

Tenga en cuenta que si utiliza word-wrap:break-word, que es compatible con muchos navegadores pero no con todos, los navegadores podrán dividir libremente entre los dígitos y antes de una coma, también, p. rompiendo "42" a "4" al final de una línea y "2" al comienzo de la siguiente línea.