Text Wrap with CSS

Problem

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.

Problem courtesy of: Umesh Patil

Solution

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."

Solution courtesy of: gdoron

Discussion

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

Discussion courtesy of: Gaurav Agrawal

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

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

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

Discussion courtesy of: sandeep

Just use word-wrap: break-word

example fiddle : http://jsfiddle.net/Rfc2j/

Discussion courtesy of: fcalderan

Generate a space after each comma. 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 comma. 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 comma, too, e.g. breaking “42” to “4” at the end of a line and “2” at the start of the next line.

Discussion courtesy of: Jukka K. Korpela

This recipe can be found in it's original form on Stack Over Flow.