Solution for word-break:break-all styling in firefox?

Question

I am trying to wrap text inside a td and using the below style

word-break:break-all

Works perfectly fine in IE, but fails in Firefox, read that this isnt supported! tried the solution given in http://petesbloggerama.blogspot.com/2007/02/firefox-ie-word-wrap-word-break-tables.html. Didnt seem to work either, Any solution for this?

Thanks, Adarsh

Answer 1

I finally had some trouble with this also. But i managed to get it working:

.hardBreak {
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+, 6, 7, 8 compability-mode */
  -ms-word-break: break-all; /* Internet Explorer 8 */
}

I hope this helps.

The last option is needed while having IE8 native mode. This works for me and is tested in FF8, IE 7, 8compability, 8native, Chrome.

Answer 2

word-wrap will only work for inline-block or block elements. So, you have to change your element type. Like:

.example {
  display: inline-block;
  word-break: break-all;
}