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).
Posted by - Christoff Truter
Date - 2008-06-09 09:51:21
Comments
First 1 2 / 2 Pages (17 Entries)
Post comment