Cross Browser Issues: Firefox Word Wrapping
The following content doesn't apply to newer versions of Firefox, the mozilla community finally added support for the css style word-wrap:break-word.
You can read about it over here.
But I am preserving this post for posterity reasons, boys and girls, yes there was a dark age when Firefox didn't support this obvious to have feature, but now it does.
While working on my new site, I wrote a quick little console application in C#
to insert a million records into my SQL database(dummy data), to see how well my database
will perform with tons of data.
The database performed superbly, but I noticed something else, the content in my side bar,
didn't wrap correctly. In IE the content stretched the divs, in Firefox the content simply
ignored the divs completely.
So I thought to myself, cool, I will fix this using CSS, then added the word-wrap style in
my CSS, everything looked fantastic, until I opened it up in Firefox - Noooooooo.
I searched for hours on google, but couldn't find a working solution, until someone mentioned
the wbr tag (word breaking tag) - basically you'll have to put a wbr tag, after every letter,
had a few concerns about how that might affect SEO.
border:1px solid black;
window.onload = function()
if (window.attachEvent == undefined)
var tag = document.getElementsByTagName("span");
for (var i = 0; i < tag.length; i++)
if (tag.item(i).className == "wordwrap")
var text = tag.item(i).innerHTML;
tag.item(i).innerHTML = text.replace(/(.*?)/g, "<wbr />");
<span class="wordwrap">Pneumonoultramicroscopicsilicovolcanoconiosis</span> is the longest word in english
What happens here is very simple, I place looooonnngggg words into span (can make it any tag you want) tags, and
assign the wordwrap css class to them, next I loop through all span tags on the page (If we're in firefox), and search
for all span tags that have the wordwrap css class assigned to them, when I find one, I use a regular expression, to
add a wbr tag after each letter.
Not a very cool situation, I hate the whole idea of having to write workarounds to make a browser behave
in a certain manner - but sometimes one just have to live with certain things (or in this case you can always join
the firefox dev team and fix it yourself).
Posted by - Christoff Truter
Date - 2008-06-09 09:51:21
1 2 Last / 2 Pages (17 Entries)