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.
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:
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:
styles.css (CSS File) :
Supported Browsers: The browser supported by <span> and <pre> tag are listed below:
- Google Chrome
- Internet Explorer
- JQuery | Change the text of a span element
- span Tag | HTML
- HTML | DOM Span Object
- Difference between <div> and <span> Tag in HTML
- CSS | column-span Property
- HTML | span Attribute
- HTML | <col> span Attribute
- HTML | DOM Column span Property
- HTML | <colgroup> span Attribute
- JQuery | Get the text of a span element
- HTML | DOM ColumnGroup span Property
- How to define the number of columns a cell should span using HTML5 ?
- How to show a span element for each rows clicked in AngularJS?
- How to change the thickness of hr tag using CSS ?
- How to change the height of br tag?
- CSS | will-change property
- How to change SVG color ?
- How to change the checkbox value using jQuery ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.