Link text popping out of box Safari?

HTML & CSS
1

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">
 <li>
   <span>
       Tweet here <a>the link that pops out of box</a>
    </span>
  </li>

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



#twitter_div, ul#twitter_update_list li span {
min-width:126px;
width:126px;
}

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.

:shifty:

2

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.

3

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

4

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

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


#twitter_div{word-wrap:break-word}
5

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.

6

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

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

7

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…

8

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: