How to Change a Span to Look Like a Pre with CSS

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

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;
}

How to show span tag using pre tag without css

You could use xmp instead of pre, but do note that it's deprecated since HTML3.2 and obsolete as of HTML5 – although it still seems to work in all major browsers:

<xmp><span class='per-amount' role='text' aria-label='1,496 undefineds'><span class='per-curr'>₪</span><span class='per-minus-sign'></span><span class='per-int-num'>1,496</span><span class='per-decimals-dot'></span><span class='per-decimals'></span></span></xmp>

Render spans inside pre tag (in the HTML, not displayed as text to the user)

The <pre> tag will render it's contents literally. You can make whitespace within another tag significant but render tags within as HTM using some CSS. For example:

CSS

.code {
    white-space: pre;

    /* If you want to use a monospace font like <pre> does by default */
    font-family: monospace;
}

HTML

<div class="code">
    My code is so <span>cool</span> and I love it
</div>

keeping pre text on the same line as span text

In the .pass class, change display:block to display:inline.

Add display:inline to the CSS for pre.

Here is a fiddle example it looks ugly because I selected and pasted out of your question directly into the fiddle without worrying about adding carriage returns.

Display element as preformatted text via CSS

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>

Wrapping a DIv in a Pre tag

Brief answer, no, you can't wrap an elements with new elements with CSS, CSS doesn't act in the DOM.

But you can still you do this to make you div look like pre:

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

To remove spaces in p, you remove margins and paddings:

.Code-Box p {
    margin: 0;
    padding: 0;
}

How can I use :before property to create a square before a span

You need to add content: "" for span:before to work

#five_day_table span {  display: block;  margin: 1px 3px 0px 0px;}span:before {  content: "";  display: inline-block;  width: 15px;  height: 15px;  margin-right: 5px;}.one:before {  background: Blue;}.two:before {  background: red;}.three:before {  background: green;}.four:before {  background: brown;}

<div id="five_day_table">  <h3>Annual Cleaning Schedule</h3>  <span class='one'>Forecasted Rain Clean</span>  <span class='two'>Forecasted Manual Clean</span>  <span class='three'>Completed Manual Clean</span>  <span class='four'>Forecasted Dirty Rain</span>
</div>

Can I have elements inside a pre?

From what I read i think you are looking for something like this. http://jsfiddle.net/3guQ7/

pre span{
    color: green;        
}

<div>
<pre>
    In not Green
    <span>Im green</span>
</pre>
<div>

---

Related Topics