Wrapping Long Lines of Text in CSS

August 13, 2009 at 12:39 pm

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:

.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+ */

Here is an example of its use:

<div style="width:100px;">
	<a href="http://www.averylonglinkthatwillnotwrapnomatterwhatyoudo.com" class="forcewrap">http://www.averylonglinkthatwillnotwrapnomatterwhatyoudo.com</a>
CSS | |

Position Is Everything

October 31, 2005 at 9:48 am

Want to find out why your site looks great in all browsers except for that one finicky stickler? At Position is Everything, Big John and Holly Bergevin document some obtuse CSS bugs in modern browsers and show workarounds to those problematic quirks.

CSS | |

The 10 Best Resources for CSS

August 15, 2005 at 5:32 pm

SiteProNews has posted The 10 Best Resources for CSS on their website. Rightfully so, css Zen Garden is at the number one spot. I would have added A List Apart to their top ten, which offers great workarounds that you won’t find anywhere else.

CSS | |