Styling <pre> tag using simple css code
Description of <pre> tag on HTML
The HTML <pre> tag is employed for indicating preformatted text. The code tag surrounds the code being marked up.
Browsers commonly render pre text during a fixed-pitched font, with whitespace in tactfulness, and while not word wrap.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML pre Tag</title>
</head>
<body>
<pre>
This text is
in a fixed-pitch
font, and it preserves
both spaces and line breaks
</pre>
</body>
</html>
This will produce following result:
This text is
in a fixed-pitch
font, and it preserves
both spaces and line breaks
In this article i'll share the simple way / simple code CSS for styling of <pre> HTML tag.
The CSS:
Here the test code from jsfiddle (CSS and HTML) section tabs.
The CSS:
pre{background: rgb(248, 248, 248); border-color: rgba(17, 17, 17, 0.0392157) rgba(17, 17, 17, 0.0392157) rgba(17, 17, 17, 0.0392157) rgb(32, 142, 214); border-radius: 4px; border-style: solid; border-width: 1px 1px 1px 5px; box-sizing: border-box; clear: both; color: #4d4e53; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 28px; margin-bottom: 30px; overflow: auto; padding: 15px; tab-size: 4; word-break: break-all; word-wrap: normal;}
Here the test code from jsfiddle (CSS and HTML) section tabs.
I Hope That Code may help you
Adblock detected
We have detected that you are using adblock in your browser
×We have detected that you are using adblock in your browser on page Simple CSS for Styling pre html tag you've visited.
Our website is made possible by displaying online advertisements to our visitors.
-
Our advertiser
- Google Adsense
Please consider supporting us by disabling your ad blocker. Thank you.