Force a line break in a URL

I've got a Twitter feed on my blog. It's working great, but there's an issue with long URLs in tweets. Long URLs break the layout by extending past the width of the container.

My code looks like this:

<ul id="twitter_update_list">
    <!-- twitter feed -->
</ul>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&amp;count=3"></script>

The blogger.js script contains the callback function which takes the data from the Twitter request and populates <li> elements to a predefined <ul>.

I'm using the following CSS to automatically break the line (for browsers that support it):

#twitter_update_list li span a {
    word-wrap: break-word;
}

I know about the <wbr> tag and was trying to use it with a jquery function that looked like this:

$(document).ready(function(){
    $("#twitter_update_list li span a").each(function(){
        // a replaceAll string prototype was used here to replace "/" with "<wbr>/"
    });
});

However when I tried using that snippet, it would cause IE to stop responding and that's no good.

I'm looking for a block of code I can just drop in that will fix the line break issue (by adding a line break to long URLs). Firefox and Chrome are working properly, but IE7 and IE8 need something more. (I don't care about IE6.)

Answers


Try playing with the white-space CSS property.

Check this link for more info: http://perishablepress.com/press/2010/06/01/wrapping-content/


Need Your Help

Postgres get last update id

postgresql select sql-update

How can i get the last update id in postgresql session?

SQL Foreign Keys/Relationships

sql sql-server-2008 insert foreign-key-relationship

Having briefly studied databases in college, I haven't worked with them since and have drawn a bit of a blank, so I was wondering if someone could help me out. I have a database called Convert, which