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-breakseems 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.
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 bewhite-space: pre-wrap;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.