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:
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: