InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

HTML tags

  • audio
  • input checkbox
  • label
  • li
  • ol
  • pre
  • template
  • ul
  • video
 
  • Home
  • > Tutorials
  • > HTML
  • > HTML tag

HTML pre tag tutorial

on Mar 16, 2016

HTML pre tag (<pre>) represents a block of preformatted text. By default pre tag does not collapse white spaces, and uses monospaced (fixed-width) font like courier. Some possible use cases of pre element tag:

  • To display emails text
  • To display code snippets
  • To display text art

Note that other tag like div can also produce behaviour similar to pre tag with appropriate css style (using white-space, font-family, etc).

Example – pre tag

This is basic pre tag example. Note that overflow is visible here.

<style>
pre {
  background-color: lightgreen;
  width: 200px;
}
</style>
<pre>
This      text is inside pre tag.
Second line of the text.
It may have      multiple spaces.
</pre>
refresh done
try it online

Example – pre tag with auto scroll

We can use overflow:auto to add scroll automatically.

<style>
pre {
  background-color: lightgreen;
  width: 200px;
  height:60px;
  overflow:auto;
}
</style>
<pre>
This      text is inside pre tag.
Second line of the text.
It may have      multiple spaces.
</pre>
refresh done
try it online

Example – pre tag – wrap long lines

We can use white-space:pre-wrap to wrap long lines. Note that it will still preseve multiple spaces.

<style>
pre {
  background-color: lightgreen;
  width: 200px;
  height:60px;
  overflow:auto;
  white-space:pre-wrap;
}
</style>
<pre>
This      text is inside pre tag.
Second line of the text.
It may have      multiple spaces.
</pre>
refresh done
try it online

Related

  • CSS overflow - visible, hidden and scroll for overflowing content
  • CSS white-space - collaping and wrapping of whitespaces and newlines
  • CSS text-overflow - truncate text with three dots
  • CSS clip

Specification

  • W3C HTML5 pre specification

Suggested posts:

  1. CSS white-space – collaping and wrapping of whitespaces and newlines
  2. How to use html pre tag to display code
  3. CSS overflow – visible, hidden and scroll for overflowing content
  4. CSS text-overflow – truncate text with three dots
  5. CSS word-wrap/overflow-wrap – specify if a word can break anywhere
  6. CSS – inline-block and baseline alignment
  7. HTML li tag
  8. jQuery – difference between html() and text()
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged HTML tag, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2021 InfoHeap.

Powered by WordPress