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?
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?
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+ */
}
Most succinctly, this forces content to wrap inside of a pre tag without breaking words.
pre {
white-space: pre-wrap;
word-break: keep-all
}
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.
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.
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;
}
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+ */
}