Text Wrap with CSS

Question

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.

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

gdoron · Accepted Answer · 2012-03-13 11:37:48Z

9

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

edited Mar 13, 2012 at 11:37

answered Mar 13, 2012 at 9:59

gdoron

151k59 gold badges302 silver badges376 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Emyr Over a year ago

Please avoid referring to w3schools, it's not a reliable resource w3fools.com

gdoron Over a year ago

@Emyr. Didn't find it anywhere else(As I wrote in the answer...), don't be nuisance.

Joey Over a year ago

What about the authoritative source: w3.org/TR/css3-text/#text-wrap? Also keep in mind that CSS Text Level 3 is still a working draft, so changes can and will be made and authors shouldn't rely on any behaviour or implementation support.

sandeep · Accepted Answer · 2012-03-13 10:04:26Z

3

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

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

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

edited Mar 13, 2012 at 10:04

answered Mar 13, 2012 at 9:59

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Comments

Fabrizio Calderan · Accepted Answer · 2012-03-13 09:59:54Z

2

Just use word-wrap: break-word

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

answered Mar 13, 2012 at 9:59

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Comments

sandeep · Accepted Answer · 2012-03-13 10:21:29Z

2

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

edited Mar 13, 2012 at 10:21

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

answered Mar 13, 2012 at 10:05

Gaurav Agrawal

4,44110 gold badges47 silver badges64 bronze badges

1 Comment

w3uiguru Over a year ago

Dude try to get way from spelling mistakes here - brek-word should be break-word.

Jukka K. Korpela · Accepted Answer · 2012-03-13 10:54:51Z

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.

Collectives™ on Stack Overflow

Text Wrap with CSS

5 Answers 5

3 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related