How to Wrap Text in a HTML pre Tag

By the end of this page, you will understand why <pre> elements do not wrap text by default, how CSS controls that behavior, and how to make long lines wrap while keeping the formatting that makes <pre> useful for code and debug output.

The <pre> element in HTML is designed to preserve whitespace exactly as written. That means:

• Spaces are kept
• Line breaks are kept
• Text usually does not wrap automatically

This is useful for:

• Code samples
• Logs
• Debug output
• ASCII art
• Any text where spacing matters

The reason long lines do not wrap is the default browser styling for <pre>, which is usually similar to:

pre {
  white-space: pre;
}

The white-space property controls how spaces, tabs, newlines, and wrapping behave.

If you want a <pre> element to keep whitespace but also allow wrapping, you can change its CSS to use values like:

white-space: pre-wrap;

This is the key idea:

• pre = preserve whitespace, no wrapping
• pre-wrap = preserve whitespace, allow wrapping

This matters in real programming because you often want output to stay readable on small screens or narrow containers. For example, a log viewer, debug panel, or documentation page may contain long lines that would otherwise force horizontal scrolling.

Think of a <pre> tag like writing on graph paper.

• With normal text, the browser rearranges words to fit the page neatly.
• With <pre>, the browser tries to keep every space and line exactly where you put it.
• Using white-space: pre-wrap is like telling the browser: "Keep my spacing, but if the line gets too long, fold it onto the next line so it still fits."

So you are not turning <pre> into normal text. You are keeping its formatting while allowing long lines to bend instead of overflowing.

The most common solution is to apply CSS to the <pre> element.

<pre class="wrapped-output">This is a very long line of debug output that would normally continue forever on one line, but now it can wrap inside the container.</pre>

.wrapped-output {
  white-space: pre-wrap;
}

What this does

• Preserves spaces and line breaks
• Allows long lines to wrap

Example with a fixed-width container

<pre class="wrapped-output">
Name: Example User
Message: This is a very long debug message that should wrap instead of causing horizontal scrolling in the browser.
</pre>

.wrapped-output {
  width: 300px;
  padding: 12px;
  border: 1px solid #ccc;
  background: #f7f7f7;
  white-space: pre-wrap;
}

If a line contains a very long word or unbroken string, you may also need:

.wrapped-output {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

This helps when the content has things like:

• long URLs
• stack traces
• generated tokens
• long file paths

Full example

<!DOCTYPE html>
<html>
<head>
  <style>
    pre {
      width: 320px;
      padding: 12px;
      border: 1px solid #999;
      background-color: #f4f4f4;
      white-space: pre-wrap;
      overflow-wrap: break-word;
    }
  </style>
</head>
<body>
  <pre>
User: Alex
Status: Success
Debug: This is a very long line of output that would normally overflow, but with pre-wrap it stays readable inside the box.
  </pre>
</body>
</html>

In this example, the indentation and line breaks remain, but long lines can wrap.

Consider this HTML and CSS:

<pre class="log">Error: Something went wrong while processing a very long request that contains lots of information and needs to stay readable.</pre>

.log {
  width: 250px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  border: 1px solid #000;
}

Step by step

1. The browser reads the <pre> element.
2. A <pre> normally preserves spaces and line breaks.
3. The CSS white-space: pre-wrap changes wrapping behavior.
4. The browser still preserves formatting, but now long lines may move onto the next line.
5. The container width is 250px, so the text cannot continue forever on one line.
6. If a word or string is too long to fit, overflow-wrap: break-word allows it to break and stay inside the box.
7. The result is readable formatted text without horizontal overflow.

Without pre-wrap

The same content would try to stay on one long line, often causing:

• horizontal scrolling
• layout overflow
• hard-to-read output

With pre-wrap

You get:

• preserved formatting
• wrapped lines
• better readability in smaller containers

Here are common situations where wrapped <pre> text is useful:

• Code documentation: Show code samples in narrow content areas without forcing horizontal scrolling.
• Debug panels: Display logs or API responses in admin tools.
• Error reporting: Show stack traces or server output in a readable box.
• Mobile layouts: Keep formatted text readable on small screens.
• Terminal-style UI: Preserve spacing while preventing the interface from breaking.
• JSON or plain-text responses: Display structured text in a way users can read more easily.

Example: an error viewer in a web app might use:

<pre class="error-output"></pre>

.error-output {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
}

This keeps logs visible even when messages are long.

In real projects, developers often combine <pre> wrapping with layout and safety rules.

Common patterns

• Log and debug containers

  • Use white-space: pre-wrap for readable logs
  • Add max-height and overflow: auto for scrollable panels

• Responsive documentation pages

  • Keep code blocks readable on tablets and phones
  • Sometimes allow horizontal scroll for real code samples, but wrap debug text

• API response viewers

  • Show formatted server output in a <pre> block
  • Use wrapping for long messages or values

Example pattern

.debug-box {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
  padding: 1rem;
  background: #111;
  color: #eee;
  border-radius: 6px;
}

Practical decision developers make

Not every <pre> should wrap.

• For source code, horizontal scrolling is sometimes preferred because line structure matters exactly.
• For logs, error text, and debug output, wrapping is often better because readability matters more.

A common approach is to use separate classes:

pre.code-sample {
  white-space: pre;
  overflow-x: auto;
}

pre.debug-output {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

This lets each type of content behave appropriately.

1. Using <pre> and expecting normal wrapping

Broken expectation:

<pre>This long line will not automatically wrap the way a normal paragraph does.</pre>

Why it happens:

• <pre> preserves formatting
• Default behavior usually prevents wrapping

Fix:

pre {
  white-space: pre-wrap;
}

2. Using word-wrap or overflow-wrap without changing white-space

Broken example:

pre {
  overflow-wrap: break-word;
}

Why this may not be enough:

• If white-space is still pre, the line may still behave like a non-wrapping line

Better:

pre {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

3. Applying the style to the wrong element

Broken example:

<div class="wrapped">
  <pre>Long output here...</pre>
</div>

.wrapped {
  white-space: pre-wrap;
}

Why this can fail:

• The <pre> itself still has its own whitespace behavior

Fix:

pre {
  white-space: pre-wrap;
}

or

.wrapped pre {
  white-space: pre-wrap;
}

4. Wrapping code when horizontal scrolling would be better

For actual code samples, wrapping can make lines harder to read because indentation and structure may become visually confusing.

Better choice for code samples:

pre.code {
  white-space: pre;
  overflow-x: auto;
}

5. Forgetting about very long unbroken strings

Example problem:

<pre class="output">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</pre>

If there are no spaces, pre-wrap alone may not be enough.

Fix:

.output {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

pre vs pre-wrap

• pre keeps formatting exactly and avoids wrapping.
• pre-wrap keeps formatting but wraps when needed.

Wrap vs horizontal scroll

/* Make <pre> wrap while preserving whitespace */
pre {
  white-space: pre-wrap;
}

/* Better for long unbroken strings */
pre {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

Quick rules

• <pre> normally behaves like white-space: pre
• Use white-space: pre-wrap to preserve formatting and allow wrapping
• Use overflow-wrap: break-word for very long words or strings
• Use horizontal scrolling instead of wrapping for many code samples

Common values of white-space

• normal → normal text behavior
• pre → preserve spaces and line breaks, no wrapping
• pre-wrap → preserve spaces and line breaks, allow wrapping
• pre-line → collapse spaces, preserve line breaks, allow wrapping

Good default for debug output

pre.debug {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
}

How do I make text wrap in a <pre> tag?

Use CSS:

pre {
  white-space: pre-wrap;
}

Why does <pre> not wrap text by default?

Because <pre> is meant to preserve whitespace and formatting exactly, which usually includes keeping long lines unwrapped.

Can I preserve spaces and still wrap lines in <pre>?

Yes. That is exactly what white-space: pre-wrap does.

What if long strings still overflow inside <pre>?

Add:

overflow-wrap: break-word;

This helps break long unbroken content such as URLs or tokens.

Should code blocks in <pre> wrap?

Sometimes, but not always. For real code samples, horizontal scrolling is often better. For logs and debug output, wrapping is usually easier to read.

What is the difference between pre and pre-wrap?

pre preserves formatting and prevents wrapping. pre-wrap preserves formatting and allows wrapping.

Can I apply wrapping to only some <pre> elements?

Yes. Use a class:

pre.wrap {
  white-space: pre-wrap;
}

• white-space property — Controls how text wrapping, spaces, and line breaks behave.
• <pre> element — The HTML element used to display preformatted text.
• overflow-wrap — Helps break long words or strings when wrapping is enabled.
• word-break — Another text-breaking property, useful in some edge cases.
• overflow — Controls what happens when content is larger than its container.
• CSS text formatting — Related because wrapping and spacing are part of text layout.
• Code blocks in HTML — Important because <pre> is commonly used for displaying code.
• Responsive design — Relevant because wrapped text improves readability on smaller screens.