I have a much longer string of numbers randomly generated. I am displaying it in one div block. As it is much longer single string. It is being written in one single line.

For example:

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>

I have set the fixed width to div block. I want to display this longer string in multiple rows,rather than displaying in one line.

I tried css 'text-wrap:normal'. It doesn't work. Actually, this property doesn't work in all browsers.

I have a much longer string of numbers randomly generated. I am displaying it in one div block. As it is much longer single string. It is being written in one single line.

For example:

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>

I have set the fixed width to div block. I want to display this longer string in multiple rows,rather than displaying in one line.

I tried css 'text-wrap:normal'. It doesn't work. Actually, this property doesn't work in all browsers.

• javascript
• css
• word-wrap

• "The text-wrap property is not supported in any of the major browsers." – gdoron Commented Mar 13, 2012 at 9:57
• 1 Well, you could use spaces after the mas. Does that conflict with your goals? – No Results Found Commented Mar 13, 2012 at 9:58

5 Answers 5

use the word-wrap:break-word; css style:

<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:

The word-wrap CSS property is used to to specify whether or not the browser is allowed to break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit.

About the text-wrap that you tried: I could not find it in MDN!, but found this in w3school:

"The text-wrap property is not supported in any of the major browsers."

Write word-wrap:break-word in .row DIV css. Write like this:

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

Check this http://jsfiddle/Rfc2j/1/

Just use word-wrap: break-word

example fiddle : http://jsfiddle/Rfc2j/

Use word-wrap:break-word; property instead of text-wrap:normal

Generate a space after each ma. Such presentation is normal in human languages, and it improves readability of numeric sequences too (though I wonder what it is generated for—why would it be needed?). You can tune the amount of spacing by setting word-spacing to a negative value.

If you do not want any spaces for some reason, generate the <wbr> tag after each ma. Frowned by standards-writers (except HTML5) but virtually universally supported by browsers. However, to cover some modern oddities (in IE and Opera), add the following to your stylesheet: wbr:after { content: "\00200B"; }.

Note that if you use word-wrap:break-word, which is supported by many browsers but not all, browsers will feel free to break between digits and before a ma, too, e.g. breaking “42” to “4” at the end of a line and “2” at the start of the next line.