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

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.

Answer 2

If you're okay with CSS3, there's a property for that:

word-wrap:break-word;