Code

Don't let links break your layout!

You spend a lot of time making your layout in CSS and getting it to look right. You put some dummy "lorem ipsum..." text in and a couple of links to get the styles correct and your good to go. That is, until you or someone put's in an extremely long link that doesn't exactly fit the width of the space provided. This can break your layouts or have some horrible overlapping text over images or even worse, over other text. But there is a solution.

I commented on this subject in this article on Compass Design. Basically, their solution was to use overflow:hidden so that if your link is longer than the area provided that it would just be hidden and not overlap anything. It's true, you could use overflow:hidden but I think it's a yucky solution. So I wrote some javascript that would easily take care of this on the page. It will work for the entire page or for any DIV you want. Below is a demo and then you have the source. If you want to restrict the script to only work on a certain DIV, then just pass the name of the DIV to the javascript function like so:

shortenURL('content');

This will only shorten links inside the <div id="content">. You can make the links as short or long as you like by changing the variable in the javascript page. It then will shorten any links longer than your desired length and then add an elipses (...) to the end.

demo link:
http://buddyquaid.com/javascript/javascript.htm

Javascript source:
http://buddyquaid.com/javascript/shortenURL.js

Let me know if you have any questions regarding what is written or any updates you'd like to submit.

Buddy