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


what about user input? October 9, 2008 by Prevyn Jeftha

How would I use this script to accept info from the screen, such as text from a text area with a specified character limit?

Great Script October 9, 2008 by p_tucky

Thanks for ur great script. It help me to completed my tasks. GREAT GREAT GREAT.

Someone finally asked this question September 5, 2008 by Christoff Truter

Hi Mike I wondered when someones going to ask that question, hehe. My initial thought when I wrote this, was to recursively iterate through the elements within a tag and insert wbr tags accordingly - which isn't all that great since that will have a performance penalty (thank you Javascript) if you've got thousands of nodes. Thats when I decided to simply use specific tags and only change them, and simply apply them to nodeless areas which might break our styles in FF, and assure there is no html within them. for example: <span class="wordwrap">the rain in llllllllllllllllllllllllloooooooooooooooooooonnnnnnnnnnggggggggggggggggggword falls mainly</span> <a href=""><span class="wordwrap">on some plain</span></a> <span class="wordwrap">Some text some text some text evenllllllllllllllllllllllllllllooooooooooooooooooonnnnnnnnnnngggggggggggggeeeeeeeeeeeerrrrrrrrrrrr word</span> a server side solution would make more sense if you do need this functionality, like in C# for example we'd match the html with a regular expression, and work replace text between indexes it returns MatchCollection matches = Regex.Matches(html, @"<(.|\n)*?>"); but like I said in the post i've got some SEO concerns if we go this route. (thats why i prefer it to live and die in the actual browser)

Nine Script!! Small Request... September 4, 2008 by Mike M

Nice Script!! I have been searching high and low for something efficient that can handle this issue. Many thanks for your work around. Im a coding newbie...it there a way to make the loop ignore certain starting and ending tags? For instance...if it encounters "<a href>" & "</a>" or "<br/>". In other words, it will still apply the wbr tag to the inside part of the link anchor text just incase the its too long, but leaves the link and other specified tags functional. Again, many thanks! Mike

You are the best August 6, 2008 by Marlon Hanks

Thanks so much.

Works in a table tag July 18, 2008 by Christoff Truter

Hi there Sheshnath, it does actually work 100% within a table, you didn't assign class="wordwrap" to your span tag.

not working this in <table> July 17, 2008 by sheshnath

<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> is not working when i provide <span> inside <table> means <table><tr><td> <span> rfffffffffffffffffffffssssssssssssssssssssssssssssfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff </span></td></tr></table> then not able to break this massage