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?

score 1298 · Accepted Answer · edited Aug 13 '21 at 08:53

1298

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

edited Aug 13 '21 at 08:53

Donald Duck

8,409
22
75
99

answered Oct 29 '08 at 19:04

adambox

24,261
9
32
34

22

`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) – MediaVince Nov 24 '16 at 11:59
7

@MediaVince, `pre-line` collapses all whitespace (not just at the beginning of the line). https://developer.mozilla.org/en-US/docs/Web/CSS/white-space has a table summarizing the behavior of `white-space` values. – Paul Jan 26 '17 at 14:57
1

[`word-wrap: break-word`](http://mdn.beonex.com/en/CSS/word-wrap.html) 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. – Flimm Mar 28 '17 at 10:25
@Flimm 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): https://developer.mozilla.org/pt-BR/docs/Web/CSS/overflow-wrap. – Edw590 Mar 04 '21 at 19:13
2

There's no need to support all those old browsers anymore, today [`white-space: pre-wrap` alone works fine in all browsers](https://caniuse.com/mdn-css_properties_white-space). – Donald Duck Aug 13 '21 at 08:37
Works like magic – Eben Watts Nov 10 '22 at 23:23

score 242 · Answer 2 · edited Apr 15 '20 at 17:26

242

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

pre {
    white-space: pre-wrap;
}

edited Apr 15 '20 at 17:26

johannchopin

13,720
10
55
101

answered May 23 '11 at 13:45

Richard McKechnie

2,748
1
15
13

3

This is because it's CSS 3 only - see the [answer](http://stackoverflow.com/a/248013/221381) from adambox for more compatibility. – lorem monkey Jul 11 '14 at 13:32
2

Consider using an automated tool instead for adding vendor-specific prefixes e.g. [autoprefixer](https://autoprefixer.github.io/). – Gunar Gessner Dec 16 '20 at 19:02
1

@loremmonkey Today all browsers support CSS 3, so there's no need for more compatibility. – Donald Duck Aug 13 '21 at 09:04
4

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;`. – ntc2 Sep 23 '21 at 11:00
I found in Tailwind there is a class for it named, whitespace-pre-wrap – Osama Malik Jul 27 '23 at 10:41

score 89 · Answer 3 · answered Dec 16 '13 at 19:04

89

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>

answered Dec 16 '13 at 19:04

Mason240

2,924
3
30
46

6

Easier than the popular answer. Thanks! – Ricky Jun 11 '14 at 22:30
9

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;"` – Jan Jul 02 '15 at 17:02
2
While this might be easier, there might be more semantic value in using `
```
` for code blocks.
```
– Angelos Chalaris Nov 05 '17 at 23:53
1
Good one, although not exactly about the
```
 tag. Thank you though.
```
– Konrad Gajewski Jan 14 '18 at 20:27
3

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. – Millhorn Feb 09 '18 at 16:46
2

@webfrogs Yes, making a .prewrap class would be best. – Mason240 Feb 15 '18 at 21:03
If using style sheets is best, then doesn't that mean richelectron's answer is the correct one? (Compared to this one?) – HoldOffHunger Aug 13 '18 at 20:49
Works perfectly if your pre-formatted text is uneven, some of which are very long sentences that exceed the width of the parent container. – Isaac Riley May 05 '20 at 15:22
simple and easy answer – Parthan_akon Jun 26 '20 at 07:11
This worked beautiful for me, thank you! – Numabyte Aug 02 '22 at 03:23

score 70 · Answer 4 · edited Aug 11 '21 at 03:19

70

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

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

edited Aug 11 '21 at 03:19

Dale K

25,246
15
42
71

answered Sep 01 '18 at 17:22

Erin Delacroix

733
5
3

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. – AnnoyinC May 16 '21 at 14:13

vovahost · Answer 5 · 2017-09-05T08:46:59.853

23

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>

edited Sep 05 '17 at 08:46

answered Aug 20 '17 at 15:35

vovahost

34,185
17
113
116

score 21 · Answer 6 · answered Jan 20 '14 at 18:35

21

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

word-break: keep-all;

answered Jan 20 '14 at 18:35

user1433454

329
2
3

score 20 · Answer 7 · edited May 23 '17 at 12:10

20

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.

edited May 23 '17 at 12:10

Community

1
1

answered May 15 '11 at 12:26

ekerner

5,650
1
37
31

18

Wouldn't using text areas for something other than input be semantically incorrect? Seems like a weird solution to me. – Josh M. Aug 16 '13 at 14:51
3

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". – ekerner Sep 24 '13 at 15:51

1

I don't think `

` has any semantic meaning (unlike ``), it simply means that newlines and multiple spaces should be preserved.

– Flimm Dec 11 '14 at 11:50

1

Its short for "pre-formatted". Youre suggesting that its actually short for pre-formatted-newlines-and-multiple-spaces-only? – ekerner Dec 11 '14 at 17:39
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: https://www.w3.org/wiki/HTML/Elements/pre – joshperry Apr 23 '17 at 17:26

score 15 · Answer 8 · answered Oct 29 '08 at 19:06

15

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.

answered Oct 29 '08 at 19:06

Bobby Jack

15,689
15
65
97

Oh, thank you for the overflow reminder! Great for mobile displays. – XTL Dec 08 '14 at 18:50
Definitely the best solution for mobile displays – Rohit Gupta May 05 '23 at 01:00

score 10 · Answer 9 · answered Apr 27 '22 at 05:10

10

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

answered Apr 27 '22 at 05:10

Nima Habibollahi

360
5
16

1

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). – Gwyneth Llewelyn Oct 01 '22 at 18:17

score 8 · Answer 10 · 2022-04-05T10:55:53.857

8

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.

edited Apr 05 '22 at 10:55

answered Dec 04 '19 at 22:05

score 7 · Answer 11 · answered Oct 29 '08 at 19:10

7

Try using

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

Or better throw CSS.

answered Oct 29 '08 at 19:10

Eduardo Campañó

6,778
4
27
24

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... – topwik Apr 28 '10 at 16:45
nevermind must have been a browser caching thing. restarted IE 6 and all is well. cheers. – topwik Apr 28 '10 at 16:56
2

Problem with this solution is it will also dissolve newline characters... E.g., any separation of text into paragraphs will be lost. – Chris W. Oct 18 '11 at 15:48

score 2 · Answer 12 · answered May 18 '15 at 09:26

2

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.

answered May 18 '15 at 09:26

rob_st

304
3
14

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. – rob_st Aug 22 '18 at 09:01

1

This is the only correct response to the author's question. Any other answer or possible "solution" encourages the misuse of the

 element. Essentially, if you want to put type inside of a  element and have it wrap, use a  tag instead, and style it any way that you like with a CSS class.

– Markus Feb 23 '20 at 16:48

I'm not sure why people find it helpful to give this kind of "I'm cleverer than you" advice. No, a
tag is not a suitable replacement: it preserves neither whitespace nor line breaks. A
```
 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.
```
– Username Obfuscation Apr 13 '20 at 11:11

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). `

`, 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 ``. Assuming that you _like_ Courier, of course. Which I don't.

– Gwyneth Llewelyn Oct 01 '22 at 18:12

score 2 · Answer 13 · answered Jul 17 '15 at 01:01

2

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>

answered Jul 17 '15 at 01:01

feacco

567
4
13

Worked great for me :-) – Wesley Tuzza Nov 18 '15 at 21:21
12

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. – PeterToTheThird Dec 14 '15 at 18:56
Using white-space: pre-wrap; and word-wrap: break-word; in my css, keeps the indentation of (json) snippets, pre line removes this. (Chrome) – Peter Visser Apr 13 '17 at 12:30
*Downvoted* because `xmp` is deprecated and removed in HTML5 (see @PeterToTheThird's answer). `xmp` was also an evil source for some exploits. – Gwyneth Llewelyn Oct 01 '22 at 18:07

score 1 · Answer 14 · answered Jul 02 '13 at 07:55

1

The following helped me:

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

Thanks

answered Jul 02 '13 at 07:55

6

I think is better using `white-space: pre-wrap;` because it respects white spaces – Ivan Ferrer Villa Feb 21 '15 at 12:48

score 1 · Answer 15 · answered Oct 12 '21 at 19:46

1

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

answered Oct 12 '21 at 19:46

Saleh Abdulaziz

1,115
9
15

1

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! :-) – Gwyneth Llewelyn Oct 01 '22 at 18:21
it works. that's what matters (: – Saleh Abdulaziz Oct 12 '22 at 13:42
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! – Gwyneth Llewelyn Oct 14 '22 at 00:24

score 1 · Answer 16 · answered Dec 22 '21 at 21:43

1

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

answered Dec 22 '21 at 21:43

pbies

666
11
28

2

Exactly! And for showing text input, you have ``; and to show terminal output, you get ``; and there are a few more... it's all about semantics. Which _are_ important in HTML! – Gwyneth Llewelyn Oct 01 '22 at 18:14

How do I wrap text in a pre tag?

16 Answers16

Linked

Related