Cross Browser Issues: Firefox Word Wrapping



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









Comments



Support Added

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

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


In late

You are great !!!! Many thanks.


Thank you

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


Great

Great scripting ..Thank u


thanks

thanks. it works


Great

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


Firefox Word Wrapping

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

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

Thanks for this logic it is useful for very good thanks


1 2 Last / 2 Pages (17 Entries)

Post comment

Name *
Email
Title
Body *
Security Code
*
* Required fields

Related Posts

Latest Posts

MS SQL: Parameter Sniffing


2012-05-21 22:38:48

Be the best stalker you can be


2011-12-13 22:33:54

Top 5 posts

Moving items between listboxes in ASP.net/PHP example


Move items between two listboxes in ASP.net(C#, VB.NET) and PHP
2008-06-12 17:07:43

Simple WYSIWYG Editor


Creating a WYSIWYG textbox for your website is actually quite simple.
2007-02-01 12:00:00

C# YouTube : Google API


Post on how to integrate with YouTube using the Google Data API
2011-03-12 08:37:51

Populate a TreeView Control C#


Populate a TreeView control in a windows application.
2009-08-27 16:01:03

Cross Browser Issues: Firefox Word Wrapping


Firefox word wrapping issues
2008-06-09 09:51:21