Cross Browser Issues: Firefox Word Wrapping

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


Posted by - Christoff Truter
Date - 2008-06-09 09:51:21




Comments



Nine Script!! Small Request...

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

Posted by - Mike M
Date - 2008-09-04 14:22:58

You are the best

Thanks so much.

Posted by - Marlon Hanks
Date - 2008-08-06 03:08:59

Works in a table tag

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

Posted by - Christoff Truter
Date - 2008-07-18 12:53:44

not working this in <table>

<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

Posted by - sheshnath
Date - 2008-07-17 12:04:32

First 1 2  / 2 Pages (14 Entries)

Post comment

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

Latest Posts

Top 5 posts

Simple WYSIWYG Editor


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

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

Cross Browser Issues: Firefox Word Wrapping


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

Populate a TreeView Control C#


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

What time will bring



2007-02-22 12:00:00