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

HtmlCss

Html Problem Overview

Is it possible to to change a <span> tag (or <div>) to preformat its contents like a <pre> tag would using only CSS?

Html Solutions

Solution 1 - Html

Look at the W3C CSS2.1 Default Style Sheet or the CSS2.2 Working Draft. Copy all the settings for PRE and put them into your own class.

pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}

Solution 2 - Html

See the white-space CSS property.

.like-pre { white-space: pre; }

Solution 3 - Html

This makes a SPAN look like a PRE:

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

Remember to change the css selector as appropriate.

Solution 4 - Html

Specifically, the property you're looking at is:

white-space: pre

http://www.quirksmode.org/css/whitespace.html
http://www.w3.org/TR/CSS21/text.html#white-space-prop

Solution 5 - Html

while the accepted answer is indeed correct, if you want the text to wrap you should use:

white-space: pre-wrap;

Solution 6 - Html

Try this

span {
	white-space: pre;
	font-family: monospace;
	display: block;
	unicode-bidi: embed
}

Solution 7 - Html

Try this style

.pre {

white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
line-height: 1.5; 	
word-break: break-all;
white-space: pre;
white-space: pre\9; /* IE7+ */
display: block;
}

Used the same here - http://www.makemyshop.in/

Solution 8 - Html

Why not just use the <pre> tag, instead of the span tag? Both are inline, so both should behave in the way you would like. If you have a problem overriding the entire definition of <pre>, just give it a class/id.

Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

Custom Compiler Warnings

C#.Netvb.netAttributesCompiler Warnings

Next Solution:

Is there hard evidence of the ROI of unit testing?

Unit TestingTdd

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionjsightView Question on Stackoverflow
Solution 1 - HtmlDiodeus - James MacFarlaneView Answer on Stackoverflow
Solution 2 - HtmlPistosView Answer on Stackoverflow
Solution 3 - HtmlMr. Shiny and New 安宇View Answer on Stackoverflow
Solution 4 - HtmlSören KuklauView Answer on Stackoverflow
Solution 5 - HtmlChristophe Le BesneraisView Answer on Stackoverflow
Solution 6 - HtmlYanniView Answer on Stackoverflow
Solution 7 - HtmlYesu RajView Answer on Stackoverflow
Solution 8 - HtmljlgosseView Answer on Stackoverflow