I have a div section which is not word wrapping as I thought it would.

If you go to http://elxn41.ca/discussions/35-toronto-pride-parade-funding-cut.html#133 you can see an example.

What am I missing?


2 answers


The only widths you've specified in those containers seem to be 100%, so there's no reason for anything to wrap.


Answered over 6 years ago by Nathan Duran
  • The #centercolumn has a width of 700px so 100% can at max be those 700px minus paddings and margins. The issue is as I explained. Kau-Boy over 6 years ago
  • Missed that. But he can still use word-wrap: break-word; Nathan Duran over 6 years ago
  • Right, but only if it is supported by the browser. And as it is a CSS3 property, not every browser might support it, but it seems that IE is supporting it. Kau-Boy over 6 years ago
Kau-Boy 110

Some browsers do not warp word, that only contain underscores or slashes (like Chrome and Internet Explorer). Do make them wraping words, you should avoid such long string.

You can do this by showing only a small link text "http://elxn41.ca/discussions/35-toronto..." or by adding some non-spacing chars that force a word warp. Those are:

  1. ­
  2. <wbr>
  3. &#8203;

But unforunately, none of them are working in each browser. But as only IE and Chrome have this issue I would recommend to use either <wbr> or &#8203; because they don't insert a dash behind the wraped word in Firefox as &shy; does.

Answered over 6 years ago by Kau-Boy