Word wrap a link so it doesn't overflow its parent div width

Question

I have this piece of code:

div#permalink_section {
  width: 960px
}

<div id='permalink_section'>
  <a href="here goes a very long link">here goes a very very long link</a>
</div>

The link text can be very long and it overflows the div when it's length does exceed the div width. Is there a way to force the link to break and go on the next line when its width exceeds the div width?

Answer 1

The following is a cross browser compatible solution:

#permalink_section
{
    white-space: pre-wrap; /* CSS3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

From How do I wrap text with no whitespace inside a <td>?

Check working example here.