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?
16 Answers
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+ */
}
-
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) Nov 24, 2016 at 11:59 -
7@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 ofwhite-space
values.– PaulJan 26, 2017 at 14:57 -
1
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.– FlimmMar 28, 2017 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 thewhite-space
replacement in IE 5.5-7 (not 5.5+, says Mozilla): developer.mozilla.org/pt-BR/docs/Web/CSS/overflow-wrap.– Edw590Mar 4, 2021 at 19:13 -
2There's no need to support all those old browsers anymore, today
white-space: pre-wrap
alone works fine in all browsers. Aug 13, 2021 at 8:37
This works great to wrap text and maintain white-space within the pre
-tag:
pre {
white-space: pre-wrap;
}
-
3This is because it's CSS 3 only - see the answer from adambox for more compatibility. Jul 11, 2014 at 13:32
-
2Consider using an automated tool instead for adding vendor-specific prefixes e.g. autoprefixer. Dec 16, 2020 at 19:02
-
1@loremmonkey Today all browsers support CSS 3, so there's no need for more compatibility. Aug 13, 2021 at 9:04
-
4Note 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;
.– ntc2Sep 23, 2021 at 11:00 -
I found in Tailwind there is a class for it named, whitespace-pre-wrap Jul 27 at 10:41
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>
-
6
-
9In 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;"
– JanJul 2, 2015 at 17:02 -
2While this might be easier, there might be more semantic value in using
<pre>
for code blocks. Nov 5, 2017 at 23:53 -
3I 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.– MillhornFeb 9, 2018 at 16:46
-
2
Most succinctly, this forces content to wrap inside of a pre
tag without breaking words.
pre {
white-space: pre-wrap;
word-break: keep-all
}
-
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.– AnnoyinCMay 16, 2021 at 14:13
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>
This is what I needed. It kept words from breaking but allowed for dynamic width in the pre area.
word-break: keep-all;
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.
-
18Wouldn't using text areas for something other than input be semantically incorrect? Seems like a weird solution to me.– Josh M.Aug 16, 2013 at 14:51
-
3Not 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".– ekernerSep 24, 2013 at 15:51
-
1I don't think
<pre>
has any semantic meaning (unlike<code>
), it simply means that newlines and multiple spaces should be preserved.– FlimmDec 11, 2014 at 11:50 -
1Its short for "pre-formatted". Youre suggesting that its actually short for pre-formatted-newlines-and-multiple-spaces-only?– ekernerDec 11, 2014 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: w3.org/wiki/HTML/Elements/pre Apr 23, 2017 at 17:26
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.
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+ */
}
-
1Sorry, 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). Oct 1, 2022 at 18:17
Use white-space: pre-wrap
and vendor prefixes for automatic line breaking inside pre
s.
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.
Try using
<pre style="white-space:normal;">.
Or better throw CSS.
-
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...– topwikApr 28, 2010 at 16:45
-
nevermind must have been a browser caching thing. restarted IE 6 and all is well. cheers.– topwikApr 28, 2010 at 16:56
-
2Problem 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, 2011 at 15:48
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.
-
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_stAug 22, 2018 at 9:01
-
1This 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.– MarkusFeb 23, 2020 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 <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. Apr 13, 2020 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).
<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 thefont-family
to the CSS styling of<pre>
. Assuming that you like Courier, of course. Which I don't. Oct 1, 2022 at 18:12
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>
-
-
12xmp 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. Dec 14, 2015 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) Apr 13, 2017 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. Oct 1, 2022 at 18:07
The following helped me:
pre {
white-space: normal;
word-wrap: break-word;
}
Thanks
-
6I think is better using
white-space: pre-wrap;
because it respects white spaces Feb 21, 2015 at 12:48
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;
}
-
1You'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! :-) Oct 1, 2022 at 18:21 -
-
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! Oct 14, 2022 at 0:24
<pre>
does it's work, but for code there is <code>
tag.
-
2Exactly! 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! Oct 1, 2022 at 18:14