ADVERTISEMENT
ADVERTISEMENT

How do I wrap text in a pre tag?

Given text within a <pre> tag, we have to wrap text within in the <pre> tag.
Submitted by Apurva Mathur, on May 31, 2022

Let's initiate the topic by learning what a <pre> tag is all about.

<pre> Tag:

It is also known as preformatted text. The text written inside this tag would display as it is, by default browser ignore all kind of spaces or line breaks that are specified in the HTML but if we want to display the text just the same so we can use this <pre> tag.

Example showing how to use <pre> tag in HTML?

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
   <body style="background-color:lavender">
      <pre style="font-size: 20px;color: black;font-weight: bold;font-family: 'Baskerville Old Face'">
		Everyone in this world craves for a happy life.It is difficult to define happiness as it is a state of the mind and it is subjective.Happiness is related to material glory and splendour by some.
		Some associate it with the health of a man while for some it lies in a sort of contentment with whatever one possesses.
		</pre>
   </body>
</html>

Output:

Example 1: Wrap text in a pre tag

We can clearly see that text displayed is same as text written in HTML file.

Now let us see how to wrap text in a <pre> tag.

Example:

<html>
  <head>    
    <style>
      pre {
        overflow-x: auto;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
  <h1>Pre tag after wrapping the text</h1>
    <pre style="font-size: 20px;color: #222222">
      Everyone in this world craves for a happy life.
      It is difficult to define happiness as it is a state of the mind and it is subjective.
      Happiness is related to material glory and splendour by some.
      Some associate it with the health of a man while for some it lies in a sort of contentment with whatever one possesses.
    </pre>
  </body>
</html>

Output:

Example 2: Wrap text in a pre tag

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.