I recently came a cross a very tricky issue where an extremely long URL needed to be displayed in a narrow DIV. Browsers refuse to wrap this line, as there is no logical place to break the text. If you don’t have the luxury of providing a shorter label for the link, and need to force it to wrap, I’ve come up with a CSS class definition that will work across virtually all browsers:
[code lang=”css”]
.forcewrap {
display: block;
white-space: pre-wrap; /* css3 */
white-space: -moz-pre-wrap !important; /* mozilla */
white-space: -pre-wrap; /* opera 4-6 */
white-space: -o-pre-wrap; /* opera 7 */
word-wrap: break-word; /* ie 5.5+ */
}
[/code]
Here is an example of its use:
[code lang=”html”]
<div style="width:100px;">
<a href="http://www.averylonglinkthatwillnotwrapnomatterwhatyoudo.com" class="forcewrap">http://www.averylonglinkthatwillnotwrapnomatterwhatyoudo.com</a>
</div>
[/code]