Reputation: 25501

How do I wrap text in a pre tag?

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?

Upvotes: 1002

Answers (18)

Madacol

Reputation: 4266

white-space modifies 2 underlying options, white-space-collapse and text-wrap

So if you don't want to mess with how white space will collapse, just declare the text-wrap

pre {
    text-wrap: wrap;
}

Upvotes: 2

Olivier Boissé

Reputation: 18093

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>

Upvotes: 10

Nima Habibollahi

Reputation: 470

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+ */
}

Upvotes: 12

user12260140

Reputation:

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.

Upvotes: 9

pbies

Reputation: 724

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

Upvotes: 1

Saleh Abdulaziz

Reputation: 1125

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;
}

Upvotes: 1

adambox

Reputation: 25501

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+ */
}

Upvotes: 1369

Erin Delacroix

Reputation: 743

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

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

Upvotes: 71

Richard McKechnie

Reputation: 2937

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

pre {
    white-space: pre-wrap;
}

Upvotes: 261

vovahost

Reputation: 35997

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>

Upvotes: 23

feacco

Reputation: 595

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>

Upvotes: 1

rob_st

Reputation: 414

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.

Upvotes: 2

ekerner

Reputation: 5840

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.

Upvotes: 22

user1433454

Reputation: 339

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

word-break: keep-all;

Upvotes: 22

Mason240

Reputation: 3034

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>

Upvotes: 97

user1020598

Reputation:

The following helped me:

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

Thanks

Upvotes: 2

Eduardo Campañó

Reputation: 6808

Try using

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

Or better throw CSS.

Upvotes: 7

Bobby Jack

Reputation: 16018

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.

Upvotes: 18

How do I wrap text in a pre tag?

Answers (18)

Related Questions