Preformatted Text Functionality

The pre tag, which stands for pre-formatted text, is intended to hold mono-spaced code text, such as for C++ or HTML languages within the webpage. Because the text is preformatted and doesn't word wrap, the pre tag will scroll horizontally to accommodate very wide lines.

// This is some C++ code inside a pre tag.
while (horse == dead)
{
	beat();
}

<!-- Remember, if you are putting HTML code inside a pre tag, you will have to encode the characters like < and >, so they don't apply themselves to the text. -->

<p>This is some HTML I placed inside the <pre> tag by using &lt; for < and &gt; for ></p>

<p>Also notice that this pre tag scrolls horizontally because the text is so wide and doesn't wrap to the next line.</p>

One other thing to be aware of when using the pre tag. Any whitespace (tabs, newlines, or spaces) inside the pre tag will be applied to the final output. This means that if you like to format your source code by using tabs, you will have to keep text inside the pre tag against the left side of the text editor, no tabs. Otherwise those tabs will show up in the final output, like this:

This is line one.
						This is line two.
						

In the source code, this is what it looks like:

						<pre>This is line one.
						This is line two.
						</pre>

Also, Internet Explorer 6 and 7 treat the styles on this tag differently, so check the Internet Explorer 6 Overrides and Internet Explorer 7 Overrides pages to understand what's necessary to make pre work the same way on them.

---

Relevant HTML

<pre>This is preformatted text. It's very Matrix-esque with the green text on the black background.</pre>

Relevant CSS

#content pre
{
	margin:0 auto 1em auto;
	padding:1em;
	border:1px solid #000;
	width:90%;
	font-size:1.2em;
	color:#29e000;
	background-color:#222222;
	overflow:auto;
}

---

« Back to Functionality Index