Mar 28
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​”}
