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 | |


March 22, 2006 at 3:44 pm

Most web designers know full well that designing web pages for different size browser windows is extremely important. Luckily, Brian Apps has released Sizer v3.3 to ease our pain and make it simple for all of us to view our websites in different sized windows. With a single click, we can now see our site as it would appear on any sized screen.

Development | |

Yahoo! Releases UI and Design Pattern Libraries

February 14, 2006 at 9:23 am

The Yahoo! Developer Network has just released the Yahoo! User Interface Library, complete with a set of JavaScript utilities and controls for rich web applications, and the Yahoo! Design Pattern Library, which illustrates optimal solutions to common web development problems. These are invaluable resources for web developers, and Yahoo!, who in my opinion has impeccable Web 2.0 design standards, is proving to be a driving force in the web development community.

Development | |