How to change a span to look like a pre with CSS?

Last Updated : 14 Apr, 2020

HTML Tag is used to style the grouped inline elements. It is mainly used to change the CSS properties of some part of text.
HTML <pre> Tag is the preformatted text element and displays the text in a fixed width which can be changed by CSS. It helps in saving line spaces and other formatting characters too.

There are 3 methods to change a tag to look like a <pre> tag with CSS:

Method 1: Using Inline CSS
Inline CSS is a styling method of HTML pages using style attribute of an HTML element. Using Inline CSS is not considered a good practice but rather, it depends on the size of the project you are working upon.
By changing some CSS properties of the span, we can make it look like <pre> tag.
Below example illustrates how to change the tag to like a <pre> by using Inline CSS.

<!DOCTYPE html> 
<html> 
<body> 
  
<h1>The span element</h1> 
  
<span style="white-space:pre;font-family:  
   monospace;display: block;margin: 25px;"> 
    GeeksForGeeks 
    is the best website.</span>  
  
</body> 
</html> 

Output:

Method 2: Using Internal CSS
Internal CSS is the styling of HTML page by declaring <style> element in the <head> section of the page.
Below illustrated is the example of using Internal CSS to change tag to look like <pre> tag:

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
        span { 
              white-space: pre; 
              font-family: monospace; 
              display: block; 
              margin: 25px; 
        } 
    </style> 
</head> 
<body> 
  
<h1>The <span> element to look  
 like a <pre> using Internal CSS</h1> 
  
<span> 
    GeeksForGeeks 
    is the best website.</span>  
  
</body> 
</html> 

Output:

Method 3: Using External CSS
External CSS is done by making a different CSS file and further linking with the HTML document using <link> tag in the <head> section.
Below illustrated is the example of using External CSS to change tag to look like <pre> tag:
HTML File:

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="styles.css"> 
      
</head> 
<body> 
  
<h1>The <span> element to look like a <pre> using External CSS</h1> 
  
<span> 
    GeeksForGeeks 
    is the best website.</span>  
  
</body> 
</html> 

styles.css (CSS File) :

span { 
    white-space: pre; 
    font-family: monospace; 
    display: block; 
    margin: 25px; 
} 

Output:

Supported Browsers: The browser supported by and <pre> tag are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

My Personal Notes

Related Articles