Wrapping a DIv in a Pre tag

Question

I have the following HTML code with me:

<div class="_idGenObjectLayout-3">   
    <div id="_idContainer063" class="Code-Box">
                    <p class="Code">$.ajax({</p>
                    <p class="Code">  type: “GET”,</p>
                    <p class="Code">  url: “/myurl”,</p>
                    <p class="Code">  dataType: “json” // text, html, xml</p>
                    <p class="Code">})</p>
    </div>
</div>

Can I use CSS to automatically wrap all div with class='Code-box' in a <pre> tag?

Expected Output:

<div class="_idGenObjectLayout-3">
      <pre><div id="_idContainer063" class="Code-Box">
                            <p class="Code">$.ajax({</p>
                            <p class="Code">  type: “GET”,</p>
                            <p class="Code">  url: “/myurl”,</p>
                            <p class="Code">  dataType: “json” // text, html, xml</p>
                            <p class="Code">})</p>
    </div></pre>
</div>

Also I want no space between the lines of all para inside a div with class='Code-box'.

How can I achieve the two requirements?

don't use other elements inside the `pre` tag. just decode whatever the code you have and paste it inside the `pre` tag. it will look like code only. — Mr_Green, Nov 21 '14 at 18:11
I have thousands of code blocks of those div elements and instead of doing it manually, I am thinking if it is possible to use a master css that automatically wraps all div with class='Code-box' in — Hitz, Nov 21 '14 at 18:13
As the answer from Nabil states, CSS cannot add tags to the DOM, however, you may be able to process a `div` like a `pre` http://stackoverflow.com/questions/219219/how-to-change-a-span-to-look-like-a-pre-with-css - oh...I see he updated his answer with the CSS. — disinfor, Nov 21 '14 at 18:17
Yes that should do but the line spacings do not go http://jsbin.com/dikeraqese/1/edit?css,output — Hitz, Nov 21 '14 at 18:27

Nabil Kadimi · Accepted Answer · 2014-11-21T18:22:28.020

1

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

edited Nov 21 '14 at 18:22

answered Nov 21 '14 at 18:16

Nabil Kadimi

10,078
2
51
58

what does this css do? – Hitz Nov 21 '14 at 18:18
Ok Nabil, this looks like it does work. But hte spacings do not go http://jsbin.com/dikeraqese/1/edit?css,output – Hitz Nov 21 '14 at 18:24
Ha! Do we have a CSS champ badge here. Please give this gentleman one! Thanksssss! – Hitz Nov 21 '14 at 18:28
One last issue. At some places, I am getting in my html which causes unnecessary spaces. Is there a way I can remove that. http://jsbin.com/xivuwexoje/1/edit?html,css,output – Hitz Nov 21 '14 at 18:45
@Hitz AFAIK there is not way to do this with CSS – Nabil Kadimi Nov 21 '14 at 18:51

Wrapping a DIv in a Pre tag

1 Answers1