Question

我有以下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>

我可以使用CSS在<pre>代码中使用class ='Code-box'自动换行所有div吗？

预期输出：

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

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

我如何达到这两项要求？

Answer 1

简短的回答，不，你不能用CSS包装带有新元素的元素，CSS不会在DOM中起作用。

但你仍然可以这样做，div看起来像pre：

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

要删除p中的空格，请删除边距和填充：

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

将DIv包装在Pre标签中

1 个答案: