Cross Browser Issues: Firefox Word Wrapping

June 9, 2008 by JavaScript   Cross Browser   This post is closed for comments.   This post is marked as obsolete.

Update: 2011/10/19

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 css style, 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, I decided to write a quick javascript to take care of this - I made a C# version as well, but had a few concerns about how that might affect SEO.

<html>
    <head>
        <title>word wrapping</title>
        <style type="text/css">
            .content
            {
                border:1px solid black;
                width:160px;
                overflow: auto;
            }

            .wordwrap
            {
                word-wrap:break-word;		
            }
        </style>
        <script type="text/javascript">
            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 />");
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
    <div class="content">
        <span class="wordwrap">Pneumonoultramicroscopicsilicovolcanoconiosis</span> is the longest word in english
    </div>
    </body>
</html>

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).


Support Added October 19, 2011 by Christoff Truter

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.

Cool September 24, 2010 by Anonymous

Cool script yaar!! Extreamly cool!!!!!!

In late September 17, 2010 by Jack

You are great !!!! Many thanks.

Thank you April 7, 2010 by Tamas Turi

Thanks Christoff, Great workaround, even after 2 years no better solution. Cheers

Great January 7, 2010 by Arun

Great scripting ..Thank u

thanks December 14, 2009 by Anonymous

thanks. it works

Great March 19, 2009 by Christoff Truter

Glad to help, let me know if you've got any other issues.

Firefox Word Wrapping March 15, 2009 by dododidi

THANKS Chistoff, this is perfect:- 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; if ((text.indexOf('<wbr>') < 0)) { tag.item(i).innerHTML = text.replace(/(.*?)/g, "<wbr />"); } } } } }

Firefox Word Wrapping March 11, 2009 by dododidi

Hello, I tried your script "wordwrap" and it works well, but with one major problem. it is dependant upon which <a href I go to having clicked on the box AND then having pressed the BACK BUTTON. Please take a look at the problem, i hope you can fix it for me. Look at this simple page which I have written regarding the problem: http://www.nigels.de/ff10.html the first box(div)leaves a lot of <WBR> tags in there having visited this page: http://www.nigels.de (my homepage, I am not spamming) but the second box(div) is OK http://www.nigels.de/new.html. I dont understand too much about JS, so please bear that in mind when you answere. THX dododidi

comments on this logic December 23, 2008 by durga prasad

Thanks for this logic it is useful for very good thanks