- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add preformatted text in HTML?
In HTML <pre> tag is used for preformatted text. The text in between <pre> open and closed </pre> tags displayed exactly as written in HTML document. The usage of preformatted text is shown below -
<pre> ---- </pre>
The <pre> element displayed the text with preserved space and line breaks and also represents in a fixed-width font.
Example
Following example, which tries to add preformatted text in HTML −
<!DOCTYPE html> <html> <body> <h2> Different variations on Displaying Paragraph</h2> <pre>The <b>pre</b> element displayed the text with preserved space and line breaks and also represents in a fixed-width font.</pre> </body> </html>
Apply CSS settings to <pre> tag in HTML
Text present in between <pre> element is displayed in a fixed-width font; it can be changed by using CSS.
Example
Following is another example, where we add preformatted text in HTML −
<html>
<head>
<title>Applying CSS to pre tag in HTML</title>
<style>
pre {
font-family: Lucida Handwriting;
color: blue;
margin: 30px;
}
</style>
</head>
<body>
<pre>
Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.
</pre>
</body>
</html>
Example
Consider another example, of the <pre> tag in HTML, creating pre-formatted text with a fixed width using CSS -
<!DOCTYPE html>
<html>
<body>
<h2>Usage of standard pre tag</h2>
<pre>The standard pre tag uses as much space as it needs.</pre>
<h2>Usage of Fixed width pre</h2>
<div style="width:150px;overflow:auto">
<pre>A pre tag with a fixed width. It uses as much space as specified.</pre>
</div>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
<style>
pre {
display: block;
font-family: monospace;
color: blue;
white-space: pre;
margin: 1em 0;
}
h2 {
color: red;
}
</style>
</head>
<body>
<h2>Usage of standard pre tag</h2>
<pre>The standard pre tag uses as much space as it needs.</pre>
<h3>Usage of Fixed width pre</h3>
<div style="width:150px;overflow:auto">
<pre>A pre tag with a fixed width. It uses as much space as specified.</pre>
</div>
</body>
</html>
Updated on: 10-Oct-2023
432 Views
Advertisements