2

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.

tw16
  • 29,215
  • 7
  • 63
  • 64
kingstringy
  • 23
  • 3

2 Answers2

0

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.

phh
  • 1
  • I'm looking to make a square block of text, with line breaks occurring wherever the text meets the limits of the containing div (even mid-word). Without the text-align:justify, all browsers break at word separators. With the text-align:justify, Safari/Chrome gives me the desired effect. Mostly I'm trying to figure out why FF is not giving me the same reaction as S/C, even though everything I can find says all browsers are compliant with this CSS property. – kingstringy Oct 05 '11 at 05:24
  • 1
    As for word-break, I don't know much about it either, found it during my pre-posting research. Just saw this: http://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break-w – kingstringy Oct 05 '11 at 05:25
  • Just tried removing the text-align:justify. No effect. S/C still inserts line breaks mid-word (which is what I'm looking for), FF still doesn't. – kingstringy Oct 05 '11 at 05:30
0

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;

tw16
  • 29,215
  • 7
  • 63
  • 64
  • Cool, thanks. Couldn't find info about FF support for word-break. The white-space declarations were just a shot in the dark. – kingstringy Oct 05 '11 at 16:09