The following are examples of various white-space settings. It tests the "normal", "pre", "nowrap", "pre-wrap", and "pre-line" settings. "pre-wrap" should look like "pre" but wrap like "normal", and "pre-line" should look like "normal" but include the newlines demonstrated in "pre".
All examples also have "overflow: auto;" set to prevent unnecessary scrolling, so this page also tests how your browser supports that.
Results:
Firefox 1.5.0.1: Supports "normal", "pre", and "nowrap" - does not support "pre-wrap" and "pre-line"; "overflow: auto" is incorrectly treated as "overflow: clip" on "nowrap" under Windows XP (but not Linux?!).
Internet Explorer 6 SP2; 7 Beta 2: Supports "normal", "pre", and "nowrap" - does not support "pre-wrap" and "pre-line"; "overflow: auto" is also unsupported.
Konqueror 3.5.1: Complete support! However, it appears to collapse multiple newlines on "pre-line" to a single newline. I disagree that this is what the CSS spec intended.
Opera 8.52: Supports "normal", "pre", "nowrap", and "pre-wrap" - does not support "pre-line".
Tests
white-space: normal;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In at risus. Phasellus vestibulum blandit odio. In quam justo, consectetuer ac, pharetra nec, ullamcorper quis, diam. Morbi elementum tempus odio. Proin dignissim sem ac nibh. Vivamus accumsan congue felis. Phasellus magna. Phasellus nec urna at massa accumsan vestibulum. Vivamus non dolor vitae tellus interdum iaculis. Aenean semper velit sit amet leo. Sed sit amet felis. Mauris gravida arcu at lectus. Nam metus eros, auctor et, aliquam sit amet, elementum nec, arcu. Sed eros leo, pretium sed, tempor sit amet, laoreet et, magna. Phasellus malesuada magna in ipsum. Nam nulla. Sed neque. Donec eget dui.
white-space: pre;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In at risus. Phasellus vestibulum blandit odio. In quam justo, consectetuer ac, pharetra nec, ullamcorper quis, diam. Morbi elementum tempus odio. Proin dignissim sem ac nibh. Vivamus accumsan congue felis. Phasellus magna. Phasellus nec urna at massa accumsan vestibulum. Vivamus non dolor vitae tellus interdum iaculis. Aenean semper velit sit amet leo. Sed sit amet felis. Mauris gravida arcu at lectus. Nam metus eros, auctor et, aliquam sit amet, elementum nec, arcu. Sed eros leo, pretium sed, tempor sit amet, laoreet et, magna. Phasellus malesuada magna in ipsum. Nam nulla. Sed neque. Donec eget dui.
white-space: nowrap;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In at risus. Phasellus vestibulum blandit odio. In quam justo, consectetuer ac, pharetra nec, ullamcorper quis, diam. Morbi elementum tempus odio. Proin dignissim sem ac nibh. Vivamus accumsan congue felis. Phasellus magna. Phasellus nec urna at massa accumsan vestibulum. Vivamus non dolor vitae tellus interdum iaculis. Aenean semper velit sit amet leo. Sed sit amet felis. Mauris gravida arcu at lectus. Nam metus eros, auctor et, aliquam sit amet, elementum nec, arcu. Sed eros leo, pretium sed, tempor sit amet, laoreet et, magna. Phasellus malesuada magna in ipsum. Nam nulla. Sed neque. Donec eget dui.
white-space: pre-wrap;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In at risus. Phasellus vestibulum blandit odio. In quam justo, consectetuer ac, pharetra nec, ullamcorper quis, diam. Morbi elementum tempus odio. Proin dignissim sem ac nibh. Vivamus accumsan congue felis. Phasellus magna. Phasellus nec urna at massa accumsan vestibulum. Vivamus non dolor vitae tellus interdum iaculis. Aenean semper velit sit amet leo. Sed sit amet felis. Mauris gravida arcu at lectus. Nam metus eros, auctor et, aliquam sit amet, elementum nec, arcu. Sed eros leo, pretium sed, tempor sit amet, laoreet et, magna. Phasellus malesuada magna in ipsum. Nam nulla. Sed neque. Donec eget dui.
white-space: pre-line;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In at risus. Phasellus vestibulum blandit odio. In quam justo, consectetuer ac, pharetra nec, ullamcorper quis, diam. Morbi elementum tempus odio. Proin dignissim sem ac nibh. Vivamus accumsan congue felis. Phasellus magna. Phasellus nec urna at massa accumsan vestibulum. Vivamus non dolor vitae tellus interdum iaculis. Aenean semper velit sit amet leo. Sed sit amet felis. Mauris gravida arcu at lectus. Nam metus eros, auctor et, aliquam sit amet, elementum nec, arcu. Sed eros leo, pretium sed, tempor sit amet, laoreet et, magna. Phasellus malesuada magna in ipsum. Nam nulla. Sed neque. Donec eget dui.
Expected
This demonstrates what the various sections should look like, assuming proper browser support. It uses non-breaking spaces and <br> to acheive the "proper" effect.
white-space: normal;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In at risus. Phasellus vestibulum blandit odio. In quam justo, consectetuer ac, pharetra nec, ullamcorper quis, diam. Morbi elementum tempus odio. Proin dignissim sem ac nibh. Vivamus accumsan congue felis. Phasellus magna. Phasellus nec urna at massa accumsan vestibulum. Vivamus non dolor vitae tellus interdum iaculis. Aenean semper velit sit amet leo. Sed sit amet felis. Mauris gravida arcu at lectus. Nam metus eros, auctor et, aliquam sit amet, elementum nec, arcu. Sed eros leo, pretium sed, tempor sit amet, laoreet et, magna. Phasellus malesuada magna in ipsum. Nam nulla. Sed neque. Donec eget dui.
white-space: pre;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In at risus. Phasellus vestibulum blandit odio. In quam justo, consectetuer ac, pharetra nec, ullamcorper quis, diam. Morbi elementum tempus odio. Proin dignissim sem ac nibh. Vivamus accumsan congue felis. Phasellus magna. Phasellus nec urna at massa accumsan vestibulum.
Vivamus non dolor vitae tellus interdum iaculis. Aenean semper velit sit amet leo. Sed sit amet felis. Mauris gravida arcu at lectus. Nam metus eros, auctor et, aliquam sit amet, elementum nec, arcu. Sed eros leo, pretium sed, tempor sit amet, laoreet et, magna. Phasellus malesuada magna in ipsum. Nam nulla. Sed neque. Donec eget dui.
white-space: nowrap;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In at risus. Phasellus vestibulum blandit odio. In quam justo, consectetuer ac, pharetra nec, ullamcorper quis, diam. Morbi elementum tempus odio. Proin dignissim sem ac nibh. Vivamus accumsan congue felis. Phasellus magna. Phasellus nec urna at massa accumsan vestibulum. Vivamus non dolor vitae tellus interdum iaculis. Aenean semper velit sit amet leo. Sed sit amet felis. Mauris gravida arcu at lectus. Nam metus eros, auctor et, aliquam sit amet, elementum nec, arcu. Sed eros leo, pretium sed, tempor sit amet, laoreet et, magna. Phasellus malesuada magna in ipsum. Nam nulla. Sed neque. Donec eget dui.
white-space: pre-wrap;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In at risus. Phasellus vestibulum blandit odio. In quam justo, consectetuer ac, pharetra nec, ullamcorper quis, diam. Morbi elementum tempus odio. Proin dignissim sem ac nibh. Vivamus accumsan congue felis. Phasellus magna. Phasellus nec urna at massa accumsan vestibulum.
Vivamus non dolor vitae tellus interdum iaculis. Aenean semper velit sit amet leo. Sed sit amet felis. Mauris gravida arcu at lectus. Nam metus eros, auctor et, aliquam sit amet, elementum nec, arcu. Sed eros leo, pretium sed, tempor sit amet, laoreet et, magna. Phasellus malesuada magna in ipsum. Nam nulla. Sed neque. Donec eget dui.
white-space: pre-line;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In at risus. Phasellus vestibulum blandit odio. In quam justo, consectetuer ac, pharetra nec, ullamcorper quis, diam. Morbi elementum tempus odio. Proin dignissim sem ac nibh. Vivamus accumsan congue felis. Phasellus magna. Phasellus nec urna at massa accumsan vestibulum.
Vivamus non dolor vitae tellus interdum iaculis. Aenean semper velit sit amet leo. Sed sit amet felis. Mauris gravida arcu at lectus. Nam metus eros, auctor et, aliquam sit amet, elementum nec, arcu. Sed eros leo, pretium sed, tempor sit amet, laoreet et, magna. Phasellus malesuada magna in ipsum. Nam nulla. Sed neque. Donec eget dui.