- 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>
Advertisements