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​​​​"}