How do I wrap text in a <pre> tag in HTML?

HTMLWeb DevelopmentFront End Technology

HTML <pre> tag defines preformatted text. It is used to display code blocks since it preserves spaces and line breaks.

If the line is large, then the <pre> tag won’t wrap it by default. To wrap it, we need to use CSS.

You can try to run the following code to learn about the usage of <pre> tag and how we can wrap text in HTML using CSS. We’ll be using CSS <style> tag to add CSS to our HTML document.

<!DOCTYPE html>
         pre {
            overflow-x: auto;
            white-space: pre-wrap;
            white-space: -moz-pre-wrap;
            white-space: -pre-wrap;
            white-space: -o-pre-wrap;
            word-wrap: break-word;

         This text renders large lines, which wraps now, since we used CSS
         properties with the pre tag in this example.

Published on 23-Jan-2018 07:16:57