css - 是否可以通过 CSS 缩进代码块中的换行？

Question

我在 HTML 文档中有一些代码。代码本身并不重要——我使用 lorem ipsum 来说明这一点。

<pre><code>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed sit amet diam sit amet sem accumsan faucibus ac in arcu.
Quisque varius, erat vel euismod ornare, libero orci laoreet velit, at lobortis sem nisl et eros.</code></pre>

我已将 white-space: pre-wrap 应用于代码块，以强制在必要时换行长行。我想知道是否可以缩进包装线的包装部分，以提供如下内容:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed sit amet diam sit amet sem accumsan faucibus ac in arcu.
Quisque varius, erat vel euismod ornare, libero orci laoreet velit,
        at lobortis sem nisl et eros.

Answer 1

有可能...我没有使用 <pre>和 <code>标签，我不确定这些标签对你有多重要......但我已经能够获得你正在寻找的样式并尽可能地模仿格式。检查一下。

http://jsfiddle.net/PVZW5/7/

CSS

div {
    margin-left:24px;
    width:400px;
}

p {
    font-family: "Courier New", Courier, monospace;
    font-weight: normal;
    font-style: normal;
    font-size: 13px;
    margin:0 28px;
    text-indent: -28px;
}

HTML

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Sed sit amet diam sit amet sem accumsan faucibus ac in arcu.</p>
    <p>Quisque varius, erat vel euismod ornare, libero orci laoreet velit, at lobortis sem nisl et eros.</p>
</div>

看看this SO question和 some solutions来自它的。这与您的问题有关。也许值得您花时间看一看 :)

希望对您有所帮助!