How to wrap a long link so it doesn’t overflow the parent div

Sometimes you have a piece of code where you want to show a long link. But you face a problem that the link overflows the parent div.

<div id="permalink_section">
    <a href="http://rafiulislam.com/how-to-wrap-a-long-link-so-it-does-not-overflow-the-parent-div/">http://rafiulislam.com/how-to-wrap-a-long-link-so-it-does-not-overflow-the-parent-div/</a>
</div>

div#permalink_section {
    width: 300px;
}

The link text is very long and it overflows the div when it’s length does exceed the div width. You can solve this with a simple css trick.

#permalink_section {
    width:300px;
    white-space: pre-wrap; /* css-3 */
    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+ */
}

See working example in jsfiddle.