How to change a span to look like a pre with CSS?
Last Updated :
14 Apr, 2020
HTML <span> 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 <span> 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 <span> 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 <span> 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 <span> 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 <span> and <pre> tag are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...