How do I wrap text in a pre tag?

Question

pre tags are super-useful for code blocks in HTML and for debugging output while writing scripts, but how do I make the text word-wrap instead of printing out one long line?

Cornet

Answer 1

The answer, from this page in CSS:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Cornet

white-space:pre-line; (and all browser compatible flavors) seems more adequate in some cases (without tabs for instance) as it takes away the space at the beginning of the line (if there are some) – Taiga

@MediaVince, pre-line collapses all whitespace (not just at the beginning of the line). developer.mozilla.org/en-US/docs/Web/CSS/white-space has a table summarizing the behavior of white-space values. – Lawton

word-wrap: break-word does not do what the question is asking for, it causes line wraps to happen even in between words. You can delete that line. On modern browsers, you don't need any of the -moz or other prefixes. – Danadanae

@Danadanae Though, word-wrap: break-word is the only way I can get Gmail Notifier Pro to break the lines (and it doesn't break words in half). This means the program uses an older IE engine, it seems. See here for a confirmation this is the white-space replacement in IE 5.5-7 (not 5.5+, says Mozilla): developer.mozilla.org/pt-BR/docs/Web/CSS/overflow-wrap. – Cubitiere

There's no need to support all those old browsers anymore, today white-space: pre-wrap alone works fine in all browsers. – Polynuclear

Works like magic – Ardellaardelle

Answer 2

This works great to wrap text and maintain white-space within the pre-tag:

pre {
    white-space: pre-wrap;
}

Turbid

This is because it's CSS 3 only - see the answer from adambox for more compatibility. – Chinn

Consider using an automated tool instead for adding vendor-specific prefixes e.g. autoprefixer. – Whall

@loremmonkey Today all browsers support CSS 3, so there's no need for more compatibility. – Polynuclear

Note that this won't break long words, it will only break between words. If you also want to break long words when necessary, add word-wrap: break-word;. – Radioactive

I found in Tailwind there is a class for it named, whitespace-pre-wrap – Barty

Answer 3

I've found that skipping the pre tag and using white-space: pre-wrap on a div is a better solution.

 <div style="white-space: pre-wrap;">content</div>

Brucie

In my case I wanted to show pre formatted text which contained tabs to make up some table. I used your solution PLUS I added a monspace font so all columns were aligned: style="white-space: pre-wrap; font-family:monospace;" – Conclude

While this might be easier, there might be more semantic value in using <pre> for code blocks. – Legit

Good one, although not exactly about the <pre> tag. Thank you though. – Dunlavy

I know this I'm late to this game, but why is this solution better than setting it once in the stylesheet? I have multiple divs on one HTML output screen that would need this. Seems like a single fix to the element in the stylesheet fixes all the problems. – Fiddlefaddle

@webfrogs Yes, making a .prewrap class would be best. – Brucie

If using style sheets is best, then doesn't that mean richelectron's answer is the correct one? (Compared to this one?) – Ariose

Works perfectly if your pre-formatted text is uneven, some of which are very long sentences that exceed the width of the parent container. – Cripps

simple and easy answer – Hilarity

This worked beautiful for me, thank you! – Johnsonjohnsonese

Answer 4

Most succinctly, this forces content to wrap inside of a pre tag without breaking words.

pre {
    white-space: pre-wrap;
    word-break: keep-all
}

Possessory

This doesn't work on ios safari as of current. Long lines will grow the pre causing it to overflow the container. Adding word-wrap: break-word; fixes the issue. – Inapposite

Answer 5

I combined @richelectron and @user1433454 answers.
It works very well and preserves the text formatting.

<pre  style="white-space: pre-wrap; word-break: keep-all;">

</pre>

Aq

Answer 6

This is what I needed. It kept words from breaking but allowed for dynamic width in the pre area.

word-break: keep-all;

Avid

Answer 7

I suggest forget the pre and just put it in a textarea.

Your indenting will remain and your code wont get word-wrapped in the middle of a path or something.

Easier to select text range in a text area too if you want to copy to clipboard.

The following is a php excerpt so if your not in php then the way you pack the html special chars will vary.

<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>

For info on how to copy text to the clipboard in js see: How do I copy to the clipboard in JavaScript? .

However...

I just inspected the stackoverflow code blocks and they wrap in a <code> tag wrapped in <pre> tag with css ...

code {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}
pre {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
  margin-bottom: 10px;
  max-height: 600px;
  overflow: auto;
  padding: 5px;
  width: auto;
}

Also the content of the stackoverflow code blocks is syntax highlighted using (I think) http://code.google.com/p/google-code-prettify/ .

Its a nice setup but Im just going with textareas for now.

Murrain

Wouldn't using text areas for something other than input be semantically incorrect? Seems like a weird solution to me. – Nutcracker

Not as semantically incorrect as adding a bunch of formatting styles to a "pre" tag when "pre" suggests that the contained text is pre-formatted and therefore doesnt require additional formatting and is to rather be taken as-is ;) I suggest dont give "semantics" priority over "functional". – Murrain

I don't think <pre> has any semantic meaning (unlike <code>), it simply means that newlines and multiple spaces should be preserved. – Danadanae

Its short for "pre-formatted". Youre suggesting that its actually short for pre-formatted-newlines-and-multiple-spaces-only? – Murrain

The type of content is meant to be specified by an inner tag, depending on the type of pre-formatted text. I would refer my friends to the w3c pre-tag wiki page: w3.org/wiki/HTML/Elements/pre – Hoary

Answer 8

You can either:

pre { white-space: normal; }

to maintain the monospace font but add word-wrap, or:

pre { overflow: auto; }

which will allow a fixed size with horizontal scrolling for long lines.

Hyperextension

Oh, thank you for the overflow reminder! Great for mobile displays. – Uninspired

Definitely the best solution for mobile displays – Demonism

Answer 9

This is what you need to wrap text inside pre tag:

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Orleanist

Sorry, not really. None of those vendor-specific tags should be used; all those browsers have been deprecated for ages. I believe that even modern versions of Firefox/Mozilla — just to pick a random example — will not accept the -moz-pre-wrap any more (they shouldn't, per specs). – Pallbearer

Answer 10

Use white-space: pre-wrap and vendor prefixes for automatic line breaking inside pres.

Do not use word-wrap: break-word because this just, of course, breaks a word in half which is probably something you do not want.

Limbo

Answer 11

Try using

<pre style="white-space:normal;">. 

Or better throw CSS.

Shrew

this one seems to work in IE 7 but not 6. this is the only suggestion that seemed promising for IE... all other suggestions were good for other browsers... – Bergh

nevermind must have been a browser caching thing. restarted IE 6 and all is well. cheers. – Bergh

Problem with this solution is it will also dissolve newline characters... E.g., any separation of text into paragraphs will be lost. – Marden

Answer 12

You can combine white-space: pre-wrap; with overflow-wrap: anywhere; if your text contains very long words.

A word will be broken even if there is no white-space available to break the line.

pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

<pre>
HelloHelloHelloHelloHelloHelloHelloHello HelloHelloHelloHelloHelloHelloHelloHello HelloHelloHelloHelloHelloHelloHelloHello HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello
</pre>

Leper

Answer 13

The <pre>-Element stands for "pre-formatted-text" and is intended to keep the formatting of the text (or whatever) between its tags. Therefore it is actually not inteded to have automatic word-wrapping or line-breaks within the <pre>-Tag

Text in a element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

source: w3schools.com, emphasises made by myself.

Antarctic

It just states the fact, that it is possible to auto-wrap text within a pre-tag though it's not the pre-tag's intention to auto-wrap. – Antarctic

This is the only correct response to the author's question. Any other answer or possible "solution" encourages the misuse of the <pre> element. Essentially, if you want to put type inside of a <pre> element and have it wrap, use a <p> tag instead, and style it any way that you like with a CSS class. – Callida

I'm not sure why people find it helpful to give this kind of "I'm cleverer than you" advice. No, a <p> tag is not a suitable replacement: it preserves neither whitespace nor line breaks. A <pre> tag is useful for preserving line breaks, but sometimes it is necessary to add additional wrapping, in the same way as any code editor might both preserve line breaks and add wrapping to long lines. – Unclassical

Just to clarify the quote by w3schools, well-known for getting small details wrong: usually Courier is the kind of thing that should only be told to users sitting in front of Windows XP, because that was the predominant font used for monospaced text back then (as it came pre-installed). <pre>, in fact, is only guaranteed to render in a monospaced font available on the system. If you want to force the specific use of Courier, just add the font-family to the CSS styling of <pre>. Assuming that you like Courier, of course. Which I don't. – Pallbearer

Answer 14

The Best Cross Browser Way worked for me to get line breaks and shows exact code or text: (chrome, internet explorer, Firefox)

CSS:

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

HTML:

<xmp> your text or code </xmp>

Megagamete

Worked great for me :-) – Sackett

xmp has been deprecated since HTML 3.2, has been completely removed from HTML5, and never worked properly to begin with. It wasn't implemented consistently among the various browsers. – Transduction

Using white-space: pre-wrap; and word-wrap: break-word; in my css, keeps the indentation of (json) snippets, pre line removes this. (Chrome) – Stoicism

Downvoted because xmp is deprecated and removed in HTML5 (see @PeterToTheThird's answer). xmp was also an evil source for some exploits. – Pallbearer

Answer 15

The following helped me:

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

Thanks

Knock

I think is better using white-space: pre-wrap; because it respects white spaces – Danndanna

Answer 16

in case your using prism or any code formatting library, then you will need to modify booth pre and code tags as follow:

pre {
    overflow-x: auto !important;
    white-space: pre-wrap !important;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap !important;      /* Opera 4-6 */
    white-space: -o-pre-wrap !important;    /* Opera 7 */
    word-wrap: break-word !important;       /* Internet Explorer 5.5+ */
}

code{
    white-space: normal !important;
}

Acetylide

You've written this in 2021 — you should drop all those vendor-specific tags for ancient browsers that nobody in their right mind should be using these days (not because they're 'fancier', mostly for security reasons; they were vulnerable to several exploits, had bugs that have since been corrected, and so forth. Using !important has its caveats, but it's worth mentioning in your answer (since nobody else does!). Additionally, it would be nice if you could explain why, in this case, !important is... important! :-) – Pallbearer

it works. that's what matters (: – Acetylide

It was just a suggestion, really. Part of the added value of StackOverflow (and related sites) is that answers aren't just snippets of code to copy & paste — instead, the answers explain why that code works. This allows people to learn something they can apply elsewhere... thus my comment! – Pallbearer

Answer 17

<pre> does it's work, but for code there is <code> tag.

Alumina

Exactly! And for showing text input, you have <kbd>; and to show terminal output, you get <samp>; and there are a few more... it's all about semantics. Which are important in HTML! – Pallbearer