html - Force a line break in a URL -

i've got twitter feed on blog. it's working great, there's issue long urls in tweets. long urls break layout extending past width of container.

my code looks 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 callback function takes data twitter request , populates <li> elements predefined <ul>.

i'm using following css automatically break line (for browsers support it):

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

i know <wbr> tag , trying use jquery function looked this:

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

however when tried using snippet, cause ie stop responding , that's no good.

i'm looking block of code can drop in fix line break issue (by adding line break long urls). firefox , chrome working properly, ie7 , ie8 need more. (i don't care ie6.)

try playing white-space css property.

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