I am experimentation inside a Wordpress framework, looking to get blog publish game titles to look inside a large square block, with line breaks showing up mid-word if required to keep the form.

While using word-wrap and (apparently) word-break CSS qualities, I acquired the appearance I needed... in Safari/Chrome. Opera 7 will not break what apart. IE does slightly much better than FF, nevertheless its line breaks appear a lot more arbitrary (also, IE is not a real priority at this time). Mainly I am trying to puzzle out why word-wrap and/or word-break would not be working in cases like this in FF.

  • I am not using tables.
  • word-break appears to become the active CSS property here. After I took it off and examined the page in Safari/Chrome, the lines stopped breaking mid-word.
  • I do not think any instantly applied Wordpress classes (hentry, format-standard, etc.) are playing a job, but correct me if I am wrong. Apart from the styling proven within the jsfiddle link, another CSS is standard Twenty Eleven Wordpress theme.

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

Any input is appreciated.

It does not work because Opera 7 does not support word-break.

On the side note which will not solve your condition white-space: -moz-pre-wrap; won't operate in Opera 7 either. It ought to be white-space: pre-wrap;

As your div is applying text-align:justify, you will not have any further. Also, whitened-space inside your code might be simplified to whitened-space:pre However, text-align on one for reds, versus pre-formatted alternatively don't make buddies. Much less sure about this word-break factor, HTML5, I guess. Exactly what are you attempting to achieve? Something /not/ breaking, or breaking, in which you want the split? Mind me, but screen dimensions and user configurations will always be well known for messing any static positioning.