Cross Browser Issues: Firefox Word Wrapping

June 9, 2008 by Christoff Truter JavaScript   Cross Browser  

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

Leave a Comment


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


Latest Posts

Simple JavaScript Shop - Back to the future : Part 1

March 20, 2015

Getting my hands dirty with TypeScript

February 17, 2015

Quick and dirty look at TypeScript

January 29, 2015

My personal life in review

January 21, 2015

Quick rundown of possible new C# 6.0 features (perhaps, maybe - I think)

January 19, 2015

Proof of Concept - JavaScript Mediator Framework

January 13, 2015

JavaScript Tip - Benchmarking

January 7, 2015

Google's new and improved reCAPTCHA - simple PHP implementation

January 5, 2015

NASA missions to follow in 2015

January 3, 2015

Online content censorship - South Africa

January 2, 2015


Most Commented on Posts

Moving items between listboxes in ASP.net/PHP example

Move items between two listboxes in ASP.net(C#, VB.NET) and PHP
June 12, 2008

Simple WYSIWYG Editor

Creating a WYSIWYG textbox for your website is actually quite simple.
February 1, 2007

C# YouTube : Google API

Post on how to integrate with YouTube using the Google Data API
March 12, 2011

Populate a TreeView Control C#

Populate a TreeView control in a windows application.
August 27, 2009

Cross Browser Issues: Firefox Word Wrapping

Firefox word wrapping issues
June 9, 2008


Angular   ASP.NET   Astronomy   C#   C++   Coding Horrors   Comedy   Cross Browser   Design Patterns   Google API   IIS   Integration   JavaScript   Love and War   Microsoft Office   Personal   PHP   South Africa   SQL   Threading   TypeScript   Visual Basic   XML