FF not displaying word-wrap CSS property

Question

I'm experimenting within a Wordpress framework, trying to get blog post titles to appear in a large square block, with line breaks appearing mid-word if necessary to maintain the shape.

Using the word-wrap and (apparently) word-break CSS properties, I got the look I wanted... in Safari/Chrome. Firefox 7 refuses to break the words apart. IE does slightly better than FF, but its line breaks seem way more arbitrary (also, IE isn't really a priority at this point). Mainly I'm trying to figure out why word-wrap and/or word-break wouldn't be working in this instance in FF.

• I'm not using tables.
• word-break seems to be the active CSS property here. When I removed it and tested the page in Safari/Chrome, the lines stopped breaking mid-word.
• I don't think any automatically applied Wordpress classes (hentry, format-standard, etc.) are playing a role, but correct me if I'm wrong. Other than the styling shown in the jsfiddle link, the other CSS is standard Twenty Eleven WP theme.

A live example: (simplified but accurate HTML/CSS): http://jsfiddle.net/3U4Xc/1/

Any input is appreciated.

Answer 1

It doesn't work because Firefox 7 doesn't support word-break.

On a side note which won't solve your problem white-space: -moz-pre-wrap; will not work in Firefox 7 either. It should be white-space: pre-wrap;

Answer 2

Since your div is using text-align:justify, you wont get any further. Also, white-space in your code may be simplified to white-space:pre; However, text-align on one side, versus pre-formatted on the other don't make friends. Not too sure about that word-break thing, HTML5, I suppose. What exactly are you trying to achieve? Something /not/ breaking, or breaking, where you want the split? Mind me, but screen sizes and user settings have always been notorious for screwing any static positioning.