Word Wrap / Reflow in Firefox Table Cell

OK, this bug is just insane. I’ve got a table cell displaying very long URLs. Oddly, there is no CSS style that allows Firefox to “reflow” or wrap the text based on a given width.

This bit of CSS solves the problem for virtually every other popular browser:

td {
width: 450px;
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+ */
}

… but it does nothing for Firefox.

That led me to find a programmable solution to my problem. What I did was use regular expression to add a zero-width character after any character that is not a letter or number. The character will wrap when it reaches a “barrier”.

Here’s the code in php:

$url = preg_replace('/([^a-zA-Z0-9])/', "$1​​​​", $url);

Or, for you smarty fans:

{$url|regex_replace:"/([^a-zA-Z0-9])/":"\$1​​​​"}

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

March 28, 2007 · Dustin · 6 Comments
Posted in: Programming & Internet

  • http://www.verbalassistant.com Curtis McBride

    I normally would not leave a message but your web site intrigued me. The snippet of code for the regular expression to fix firefoxes non existant word wrap was just what I was looking for. Thanks for putting it out there.

  • AJ

    After struggling for 3 hours your solution finally helped. Thanks a ton for sharing

  • davinchi

    Thank you very much for you big help

  • http://setevoy.by Setevoy

    This is the only working solution I’ve found on the internet!

    I’ve spent many hours on this problem trying to find css styles but no luck…All this css stuff doesn’t work for FireFox ( Only zero-length symbol does the trick !

    Thanks a lot !!!

  • Anon

    Hmm, the problem with this is that you can’t copy and paste the URL. It will have a space in it. Just use overflow:hidden on the table cell.

  • …

    does any one know how to get a picture of a sniper in ur name with letters???