是否可能通过CSS缩进代码块中的换行？ [英] Is it possible to indent wrapped lines within code blocks via CSS?

问题描述

我在HTML文档中有一些代码。代码本身并不重要 - 我已经使用了lorem ipsum来使这一点清楚。

I have some code inside an HTML document. The code itself is not important – I've used lorem ipsum to make this clear.

<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 到代码块，强制长行根据需要换行。我想知道是否可以缩进被包装的行的包装部分，给出这样的东西：

I've applied white-space: pre-wrap to the code block to force long lines to wrap as necessary. I'd like to know whether it's possible to indent the wrapped portion of the wrapped lines, to give something like this:

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进行控制。

Unfortunately after much searching I've come to believe that this is currently impossible using CSS alone. What's required is a pseudo-element for each "line" (text matching /^.*$/m), which would enable the indentation of lines beyond the first to be controlled via CSS.

我在www风格的邮件列表上提出了这个问题。 fantasai的回应是有希望的，特别是建议 text-indent 属性可以扩展为允许文本缩进：2em挂线。

I raised this issue on the www-style mailing list. fantasai's responses are promising, particularly the suggestion that the text-indent property could be extended to allow text-indent: 2em hanging each-line.

这篇关于是否可能通过CSS缩进代码块中的换行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！