WP-Mix

A fresh mix of code snippets and tutorials

CSS cross-browser whitespace rules

If you’ve ever tried to make whitespace behave across all browsers, you’ll appreciate today’s snippet.

When included in your CSS file, this code will ensure that lines wrap within the element.

width: 500px;                          /* specify width   */
white-space: pre;                      /* CSS2.0 browsers */
white-space: pre-wrap;                 /* CSS2.1 browsers */
white-space: pre-line;                 /* CSS3 and CSS2.1 */
white-space: -moz-pre-wrap !important; /* 1999+ Mozilla   */
white-space: -hp-pre-wrap;             /* for HP printers */
white-space: -o-pre-wrap;              /* Opera 7 and up  */
white-space: -pre-wrap;                /* Opera 4 thru 6  */
word-wrap: break-word;                 /* IE 5.5+ and up  */
_white-space: pre;                     /* restate for IE  */
/* overflow-x: auto; */                /* Firefox 2 only  */
/* width: 99%; */                      /* only if needed  */

Customize as you please!

★ Pro Tip:

Digging Into WordPressGA Pro