Reputation: 10705
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.
Upvotes: 5
Views: 1668
Reputation: 150313
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>
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."
Upvotes: 9
Reputation: 201896
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.
Upvotes: 1
Reputation: 4431
Use word-wrap:break-word;
property instead of text-wrap:normal
Upvotes: 2
Reputation: 92873
Write word-wrap:break-word
in .row
DIV css. Write like this:
#row{
word-wrap:break-word;
}
Check this http://jsfiddle.net/Rfc2j/1/
Upvotes: 3
Reputation: 123438
Just use word-wrap: break-word
example fiddle : http://jsfiddle.net/Rfc2j/
Upvotes: 2