Cross Browser Issues: Firefox Word Wrapping
June 9, 2008 by
Christoff Truter
JavaScript
Cross Browser
This post is closed for comments.
This post is marked as obsolete.
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 css style, 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).
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.