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>
<html>
   <head>
      <style>
         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;
         }
      </style>
   </head>

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


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