是否可以通过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>

看看这个SO问题和一些来自它的解决方案.这与您的问题有关.你可能值得花时间看看:)

我希望这有帮助!

Answer 2

不幸的是,经过多次搜索,我开始相信单独使用CSS目前是不可能的.所需要的是每个"行"(文本匹配/^.*$/m)的伪元素,这将使得第一行之外的行的缩进能够通过CSS来控制.

我在www-style邮件列表上提出了这个问题.fantasai的回应是有希望的,特别是关于text-indent财产可以扩展到允许的建议text-indent: 2em hanging each-line.

Answer 3

text-indent: -2em;
padding-left: 2em;