HTML pre: Preserve Whitespace and Wrap Long Lines
HTML <pre> marks a preformatted text region that preserves spaces and line breaks. Combine it with <code> for source code, and use CSS white-space: pre-wrap when long lines should wrap to the available width.
Difference Between pre and Regular Paragraphs
Regular paragraphs combine consecutive spaces and line breaks in the source according to default CSS. The pre tag maintains this spacing by default, making it suitable for code with indentation, logs, and text where consistent spacing is important. The default font is usually monospaced, but fonts and space handling can be changed with CSS.
You can align table-like visuals using spaces, but this doesn't provide the actual row and column relationships of a table. Use table for comparative data, and when conveying meaning with spacing like ASCII art, provide explanations that can be understood by screen readers as well.
Full Example: Preserving Spaces and Handling Long Lines
Save the following document as pre-demo.html and open it in a browser. Save the file in UTF-8, and no external libraries are required. Horizontal scrolling and word wrapping have been applied separately to the same long string.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Comparing pre whitespace and line breaks</title>
<style>
body { max-width: 40rem; margin: 1rem auto; padding: 0 1rem; }
pre { padding: 1rem; background: #eef2f4; }
.scroll { overflow-x: auto; }
.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<h1>Whitespace and line breaks</h1>
<p>one two
three</p>
<pre>one two
three</pre>
<h2>Horizontal scrolling</h2>
<pre class="scroll"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
<h2>Line wrapping</h2>
<pre class="wrap"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
<h2>Displaying HTML source</h2>
<pre class="scroll"><code><p>Hello & welcome</p></code></pre>
</body>
</html>The first paragraph merges into one line according to default space handling, and the following pre preserves the four spaces between the words one and two and the four spaces before the word three. When the screen is narrowed, the scroll example gains horizontal scroll, and the wrap example breaks even long words onto the next line. In the HTML source display area, <p>Hello & welcome</p> appears as text in tag form.
HTML inside pre is also interpreted.
Pre is not an element that prevents HTML interpretation. If you write an actual <strong> tag inside it, the tag’s meaning is applied. To display HTML source as text, escape < to < and & to &. The last example of the entire document above uses this principle.
The first line break immediately after the pre start tag is removed by the HTML parser. Subsequent line breaks and the indentation in the code are preserved, so check the actual starting position of the text to ensure that spaces for document alignment do not appear on the screen. When displaying code dynamically, you can insert the string using textContent instead of innerHTML to prevent it from being interpreted as tags.
Things to check when automatic line breaking does not occur
If you only specify overflow-wrap and keep the default white-space: pre, the desired line breaks may not appear. To preserve spaces and line breaks while wrapping at the edge of the screen, apply pre-wrap, and to break up long strings without spaces, also specify overflow-wrap. Conversely, if you need to maintain a single-line structure for the code, keep pre and provide internal scrolling with overflow-x: auto.
pre preserves the text layout, and code indicates that the content is code. Using both together does not automatically generate syntax coloring, and a highlighter or separate CSS is needed. Instead of relying on the obsolete width and wrap attributes, adjust the display with CSS. For detailed conditions, refer to the pre definitions in the HTML Standard and the MDN pre reference.
