66

I am loading some content inside an iframe. I want this content to behave as-if it was inside a <pre> tag - namely for it to respect line breaks. I am using javascript to set the style of the body element of this iframe.

I am wondering if it would be possible to set a particular style that will cause the body of this iframe to act like it's inside <pre/>.

chaimp
  • 16,897
  • 16
  • 53
  • 86

4 Answers4

76

you can find the default setting or how they're suppose to be at http://www.w3.org/TR/CSS2/sample.html just apply the same style to the element you want to behave as a pre element and voila you're done

p.s. which is basically

pre{ white-space: pre ; display: block; unicode-bidi: embed }
Breezer
  • 10,410
  • 6
  • 29
  • 50
  • 2
    This is great! After reviewing the link, the property `font-family: monospace;` was missed. Its not really needed, but worth mentioning. – mattdevio Jan 16 '18 at 05:07
41

If you're only interested in preserving line breaks but not whitespace then I suggest using:

body {
    white-space: pre-line;
}

This will collapse multiple consecutive white space characters into one but preserve line breaks. The downside is that it's only supported in IE versions 8 and up.

Hjorth
  • 411
  • 4
  • 2
15

Try setting the element's white-space style to a value of pre.

body {
    white-space: pre;
}
stevelove
  • 3,194
  • 1
  • 23
  • 28
4

If you just want it to act on linebreaks like pre, use the css: white-space: pre

Keltex
  • 26,220
  • 11
  • 79
  • 111