Cross-browser text wrapping in

Until CSS3 is widely supported, if you want to wrap text inside a <pre> tag you can do it this way:

pre {
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  white-space: normal;

Note that white-space:normal at the end makes IE behave, and width:99% prevents the dreaded horizontal scrollbar.

Thanks to “Deng Zhi” who commented on Wrapping Text Inside Pre Tags.

Written on April 27, 2009