How to Wrap Text in Pre-Tags in HTML

You can use PRE tags to make text look like code in most computer terminals, which is a monospaced, Courier font.

But the problem with PRE tags is that the text does not wrap automatically. If the user wants to see a long paragraph, they need to scroll RIGHT on their computer screen, instead of DOWN, which is more intuitive.

To make PRE tagged text autowrap, the code is very simple...

pre {
white-space: pre-wrap;
}

All PRE-tags are now wrapped. This solution will work on all modern browsers.

If you want a solution that works on older machines, the code is a bit more complex...

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

(Multi-Browser Solution Source: https://longren.io/wrapping-text-inside-pre-tags/ )