This is the problem I've been having with Blogsnob. The kind folks there provide a free service for members of the blogging community, enabling you to increase your blog's exposure via simple text-based ads.
All you have to do is insert the following code somewhere and hope everything works out okay:
I have placed this at the very bottom of my right-hand margin. This margin is set to a width of around 160 pixels and it is meant to stay that way.
The only problem with inserting this piece of code is that you do not know ahead of time how much text and/or images might be thrown into your site. Now I trust the service for what it is, and most of the time it seems to be working alright. However, sometimes I get really long words containing say 50 characters in a row. This breaks up my layout. In order to accommodate this exceptionally long word, the poor 160 pixel wide margin is expanded so that a much larger vertical bar appears. You see, HTML has no character wrapping, only word wrapping at the white-space borders. My main content area is covered up on the right side and shifted to the left. Bummer, man.
Note that I have wrapped the ill-behaved section of code with another div-tag and I have labeled it "blogsnob" accordingly.
Then just right after the spot where I have inserted the code above, I add the following function call:
Alright, so what does this magical function called
mxw() really do? Well, it looks within the div-tag that I labeled as "blogsnob", recursively parses through the nodes and child-nodes, and grabs each TEXT-element. If it then finds any words which are longer than a pre-defined maximum length, say 20 characters (
mxw_max = 20;), then it will truncate this bugger to this given length. Pretty neat, huh?
// Maximum allowed length of text words.
var mxw_max = 20;
// Wrapper function which checks that certain DOM
// is supported before calling recursive mxw2().
if (!document.getElementById) return;
var n = document.getElementById(id);
if (!n || !n.nodeType) return;
// Checks all text of given node and all its
// descendant nodes, truncating each word that
// is longer than allowed length mxw_max. This
// is an extra safety valve preventing unwanted
// overrun, e.g. of sidebars and/or margins.
if (n.nodeType == 3 /*Node.TEXT_NODE*/)
var flag = 0;
var words = n.data.split(" ");
for (var i = 0; i < words.length; i++)
if (words[i].length > mxw_max)
words[i] = words[i].substr(0, mxw_max-2) + ". ";
if (flag > 0) n.data = words.join(" ");
var children = n.childNodes;
for (var i = 0; i < children.length; i++) mxw2(children[i]);
Hope you like it and find it useful for your own web pages somewhere. You're welcome.