是否可以通过CSS在代码块中缩进包装行?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (58)

我在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.
提问于
用户回答回答于

不幸的是,经过多次搜索,我认为目前单独使用CSS是不可能的。所需要的是每个“行”(文本匹配/^.*$/m)的伪元素,这将使通过CSS控制超出第一行的缩进。

用户回答回答于

这是有可能的......我没有使用<pre><code>标签,但是我已经能够获得你正在寻找的东西。

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>

扫码关注云+社区

领取腾讯云代金券