将DIv包装在Pre标签中

I have the following HTML code with me:

我有以下HTML代码:

<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?

我可以使用CSS在

标签中自动用class ='Code-box'包装所有div吗?

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'.

另外,我想在div ='Code-box'的div中所有para之间没有空格。

How can I achieve the two requirements?

我怎样才能达到这两个要求?

1 个解决方案

#1

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

简单回答,不,你不能用CSS包装带有新元素的元素,CSS不会在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:

要删除p中的空格,请删除边距和填充:

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

#1