Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to wrap a text in a <pre> tag using CSS ?

  • Last Updated : 16 Jul, 2021

In this article, we will learn how to wrap a text in a <pre> tag. The <pre> tag is used to display the block of preformatted text which preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers. By Default, the <pre> tag does not support <pre> tag. In case of rendered large text in a prescribed way, the web browsers show a horizontal scrollbar. The user is facing a problem with reading the whole line part by part. 

Approach:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • First, we create an HTML document that contains a <pre> tag.
  • Now, use the CSS overflow-x property set to “auto” which adds the scrollbar automatically when the contents are overflow.
  • Set the white-space property to “pre-wrap”.
  • At last, use the main word-wrap property which is set to “break-word” so that words that exceed the width of the container will be arbitrarily broken to fit within the container’s bounds.

Example: 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        #gfg {
            overflow-x: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
            font-size: 15px;
        }
  
        pre {
            overflow-x: auto;
        }
    </style>
</head>
  
<body>
    <h2 style="color:green;text-align:center;">
        GeeksforGeeks
    </h2>
    <b>
        How to wrap a text in a <pre> tag?
    </b>
  
    <h3>
        Before content wrap
    </h3>
  
    <pre>
            GeeksforGeek,A Computer Science Portal 
            for Geeks. The best courses provided 
            here are best to learn and gain a lot 
            of knowledge related to computer science.
    </pre>
  
    <h3>
        After content wrap
    </h3>
  
    <!-- html pre tag starts -->
    <pre id="gfg">
            GeeksforGeek,A Computer Science Portal 
            for Geeks. The best courses provided 
            here are best to learn and gain a lot 
            of knowledge related to computer science.
    </pre>
    <!-- html pre tag ends -->
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!