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).
No comments:
Post a Comment