Menu
Is there any way to emulate the display of a pre element via CSS?
For example, can I keep the whitespace intact in this div by using a CSS rule?
<div class="preformatted"> Please procure the following items: - Soup - Jam - Hyphens - Cantaloupe </div> 
779
The <pre> tag defines preformatted text. Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.
HTML <pre> tag defines preformatted text. It is used to display code blocks since it preserves spaces and line breaks. If the line is large, then the <pre> tag won't wrap it by default. To wrap it, we need to use CSS.
You need to make sure the code is formatted correctly, the pre tag tells the browser to show the text inside the pre "as is".
Use white-space: pre to preserve whitespace preformatting as in the pre element. To go a step further, also add font-family: monospace, as pre elements are typically set in a monospace font by default (e.g. for use with code blocks).
.preformatted { font-family: monospace; white-space: pre; }<div class="preformatted"> Please procure the following items: - Soup - Jam - Hyphens - Cantaloupe </div>
.preformatted { white-space: pre-wrap; } I think "pre-wrap" is better. It can help with long length in line.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
