Link text popping out of box Safari?

Never had this one before…

Simple column.

The default widget from Twitter and any link within the tweet post pops out of the box and is not dropping a line…

<div id="twitter_div">
<h4 class="sidebar-title">Twitter Feed</h4>
<ul id="twitter_update_list">
       Tweet here <a>the link that pops out of box</a>

<a href="" id="twitter-link" style="display:block;text-align:left;">Follow us on Twitter</a>

#twitter_div, ul#twitter_update_list li span {

Firefox fine, Safari, when the link within the tweet is a long one its scrolling out of the box.

I think its even ok in IE.


The word-wrap:break-word should take care of the long link and has worked in IE since about ie5.5 and also in Safari for quite a while. Recent versions of Firefox and Opera also support it now.

You could add a few pixels of padding, ( remember to adjust box size for this) the break may look less harsh that way.

Do you have a live example that we can look at?

If it’s a string of unbroken text then you could try this:


Yeah because thats the width of the column the link text is scrolling out of.

The span is their because twitter put it there in their widget, nothing i can do about it.

  1. why do you need the <span> within the <li>

  2. you have the <span> width set to 126px;

Cheers Paul that does seem to work, how will it hold up on IE etc?

The live example is here bottom left…

Currently i have overflow hidden to it doesn’t cross into the main body, not ideal…

Nobody have a clue why a link cannot drop a line when it reaches its border in Safari or Chrome?

I thought they were the best browsers but if you have a link from a twitter feed it just scrolls on out the box even if you’ve given that box a set width.

Makes no sense :frowning: