Preformatted text in HTML - Browser Rendering Trace

Render Flow - Preformatted text

[Read <pre>] -> [Create PRE node] -> [Add text preserving whitespace] -> [Render text with monospace font] -> [Apply white-space: pre style] -> [Display block with scroll if overflow]

The browser reads the <pre> tag, creates a block element that preserves all spaces, tabs, and line breaks exactly as typed, using a monospace font and special white-space handling.

Render Steps - 3 Steps

Code Added:<pre> element with text inside

Before

[ ] (empty space where text will appear)

→

After

[  
  L i n e   1
    L i n e   2   i n d e n t e d
L i n e   3
]

The <pre> tag creates a block area that preserves all spaces and line breaks exactly as typed.

🔧 Browser Action:Creates block box and preserves whitespace characters

Code Sample

Shows text exactly as typed with spaces and line breaks preserved in a block with monospace font.

HTML

<pre>
  Line 1
    Line 2 indented
Line 3
</pre>

Render Quiz - 3 Questions

After step 1, what do you see in the browser?

A Text wrapped and aligned left ignoring spaces

B Text with all spaces collapsed into one space

C Text with spaces and line breaks exactly as typed

D Empty space with no text visible

Common Confusions - 2 Topics

Why does my spaces and line breaks disappear inside <pre>?

If you see spaces or line breaks missing, check if your text editor or browser is removing them before rendering. The <pre> tag itself preserves whitespace.

💡 Remember: <pre> preserves whitespace, but your source text must have it.

Why does text inside <pre> sometimes scroll horizontally?

Because white-space: pre prevents wrapping, long lines overflow horizontally causing scrollbars.

💡 Long lines in <pre> cause horizontal scroll, unlike normal text that wraps.

Property Reference

Property	Value	Effect on Text	Common Use
white-space	pre	Preserves all spaces, tabs, and line breaks exactly	Used by <pre> to keep formatting
font-family	monospace	Each character has equal width, aligns text vertically	Used in code blocks and <pre>
display	block	Takes full width, starts on new line	Default for <pre> to separate content

Concept Snapshot

The <pre> tag shows text exactly as typed. It preserves spaces, tabs, and line breaks. Uses white-space: pre style to keep formatting. Text uses monospace font for equal character width. Long lines may cause horizontal scrolling.