Introduction

HTML collapses ordinary whitespace by default, which means multiple spaces, tabs, and line breaks do not render the way plain text originally looked. If you want to display plain text in HTML without using the pre element, you need to preserve both formatting and safety yourself.

The good news is that modern CSS already solves most of the whitespace problem. The important part is choosing the right white-space mode and making sure the text is escaped before it is inserted into the page.

Use CSS Instead of Manual Space Replacement

The simplest approach is to render the text in a normal container and apply a whitespace-preserving CSS rule:

<div class="plaintext-output" id="output"></div>

1.plaintext-output {
2  white-space: pre-wrap;
3  tab-size: 4;
4  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
5}

white-space: pre-wrap preserves sequences of spaces and newline characters while still allowing long lines to wrap. That is often exactly what people want when they say "like plain text, but not inside pre."

If you want to preserve spaces but collapse line breaks differently, other white-space modes may fit better. In most plain-text rendering cases, though, pre-wrap is the best default.

Insert Text Safely

A very common mistake is to use innerHTML with user-provided text. That is dangerous because any HTML-looking content inside the text will be interpreted as markup instead of displayed literally.

Use textContent instead:

1<script>
2  const rawText = "Line one\n    indented line\nLine three with    spaces";
3  const output = document.getElementById("output");
4  output.textContent = rawText;
5</script>

This does two important things at once:

• it escapes the content automatically,
• it preserves the original text characters so CSS can render the whitespace correctly.

That means you do not need to replace spaces with   or line breaks with br elements just to display plain text faithfully.

When You Might Still Transform Newlines

Sometimes you are rendering text into a component or email template where CSS support is limited. In that case, converting newlines into explicit br elements can still be useful, but it should be done after escaping the text.

For example:

1function escapeHtml(text) {
2  return text
3    .replaceAll("&", "&")
4    .replaceAll("<", "&lt;")
5    .replaceAll(">", "&gt;")
6    .replaceAll('"', "&quot;")
7    .replaceAll("'", "&#39;");
8}
9
10function renderPlainText(text) {
11  return escapeHtml(text).replaceAll("\n", "<br>");
12}

This approach preserves line breaks, but it still does not preserve repeated spaces unless you add CSS such as white-space: pre-wrap or manually convert spaces. That is one reason the CSS-first approach is usually cleaner.

Choosing the Right white-space Value

A quick rule of thumb:

• 'normal collapses spaces and newlines,'
• 'pre preserves everything but disables wrapping,'
• 'pre-wrap preserves whitespace and still wraps long lines,'
• 'pre-line preserves line breaks but collapses repeated spaces.'

If your goal is "render plain text naturally in a layout," pre-wrap is typically the best match. It preserves author formatting without forcing horizontal scrolling for long lines.

Common Pitfalls

• Using innerHTML for raw text. That can create security bugs and broken formatting.
• Replacing spaces manually with   everywhere. That usually makes wrapping and maintenance worse.
• Forgetting tabs. If tab alignment matters, set tab-size explicitly.
• Choosing pre when line wrapping is required by the layout.
• Converting newlines to br elements without escaping the original text first.

Summary

• The easiest way to preserve plaintext whitespace without pre is white-space: pre-wrap.
• Use textContent to insert raw text safely.
• Add tab-size if the source text includes tabs.
• Only convert newlines manually when CSS-based rendering is not an option.
• Safe plaintext rendering is a combination of whitespace handling and HTML escaping.