Code
Everybody knows use can use the pre element to get preformatted text -- monospaced, hard line breaks, the works. What you may not know is that you can get preformatted text that wraps at the width of the bounding element. That's right -- no more long lines causing horizontal scroll bars and overlapping columns! Get all the goodness of preformatted text with automatic word wrap.
The code
This function relies on code explained elsewhere:
- HOWTO determine the browser name and version number
/**
* Sets 'white-space: pre-wrap' for a node (x-browser).
*
* There are as many ways of specifying pre-wrap as there are browsers.
*
* CSS3: white-space: pre-wrap;
* Mozilla: white-space: -moz-pre-wrap;
* Opera: white-space: -o-pre-wrap;
* IE6/7: white-space: pre; word-wrap: break-word;
*
* @param {Element} el Element to enable pre-wrap for.
*/
goog.style.setPreWrap = function(el) {
if (goog.userAgent.IE) {
el.style.whiteSpace = 'pre';
el.style.wordWrap = 'break-word';
} else if (goog.userAgent.GECKO) {
el.style.whiteSpace = '-moz-pre-wrap';
} else if (goog.userAgent.OPERA) {
el.style.whiteSpace = '-o-pre-wrap';
} else {
el.style.whiteSpace = 'pre-wrap';
}
};
The code walkthrough
Unfortunately, this requires a user-agent test, because there is no efficient way to determine CSS capabilities in script. The first test is for IE, which supports the white-space and word-wrap CSS properties (accessed in JavaScript through node.style.whiteSpace and node.style.WordWrap):
if (goog.userAgent.IE) {
el.style.whiteSpace = 'pre';
el.style.wordWrap = 'break-word';
Next comes Firefox, which supports the proprietary -moz-pre-wrap value instead:
} else if (goog.userAgent.GECKO) {
el.style.whiteSpace = '-moz-pre-wrap';
Next comes Opera, which supports the equally proprietary -o-pre-wrap value:
} else if (goog.userAgent.OPERA) {
el.style.whiteSpace = '-o-pre-wrap';
Finally, for all other browsers (including Safari), we set the "proper" value white-space: pre-wrap:
} else {
el.style.whiteSpace = 'pre-wrap';
}
};
Further reading
- HOWTO determine the browser name and version number
- white-space property in CSS 2
- word-wrap property in CSS 3