Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to make any CSS element behave like <pre>

Tags:

html

css

pre

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/>.

like image 577
chaimp Avatar asked Dec 30 '10 04:12

chaimp


People also ask

What is pre CSS?

The <pre> tag defines preformatted text. Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.

How do I adjust elements in CSS?

Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.

How do you make elements stay in the same place in CSS?

You need a wrapper like div class="wrap" which has position: relative . Then everything positioned absolutely inside this wrap will be absolute from top left inside the relative element.

How do I apply a CSS to a specific element?

The CSS id Selector The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.


2 Answers

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 } 
like image 134
Breezer Avatar answered Sep 20 '22 20:09

Breezer


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.

like image 38
Hjorth Avatar answered Sep 18 '22 20:09

Hjorth