Thursday, August 26, 2010

Forcing Breaks In Long Words/URLs/Email


Problem:
I have a table with two columns that will have email addresses in them. I tried to set the width and max-width of all the columns, but if the email addresses are excessively long, the column inevitably stretches, resizing all the columns, and worse, stretching the table out of its width/max-width.

Solution:
I came across a comprehensive fix for forcing all browsers to break up long words, thereby maintaining box borders, and without overflow: hidden.

pre {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */ 
}

Of course, it doesn’t have to be set to a pre tag.

The only problem I’m having is with IE8 which is not breaking, except when I switch the browser to Compatibility View. From everything I’ve read, the last line should work in IE8, but I’ve had no joy so far.

If anyone knows what I’m missing, please enlighten.

0 Comments:

Post a Comment

<< Home