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。这与您的问题有关。值得您花时间看看：）

我希望这有帮助！

Answer 2

不幸的是，经过多次搜索，我开始相信单独使用CSS目前是不可能的。需要的是每个“行”（文本匹配/^.*$/m）的伪元素，这样可以通过CSS控制超出第一个的行的缩进。

我在www-style邮件列表上提出了这个问题。 fantasai's responses很有希望，特别是建议text-indent属性可以扩展为允许text-indent: 2em hanging each-line。

Answer 3

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

Answer 4

我不确定这是否适用于<pre>，但看起来很有希望。

http://www.ehow.com/how_2382848_hanging-indent-css.html

Answer 5

目前不仅可以使用CSS，还可以借助脚本语言...

<强> PHP

echo '<pre id="the_pre_id"><div>'.str_replace("\n",'</div><div>',$text).'</div>';

或 JavaScript

var el = document.getElementById('the_pre_id');
el.innerHTML='<div>'+el.innerHTML.replace(/\n/g, '</div><div>')+'</div>';

注意，您只需选择上述代码段之一即可。两者都完成了同样的事情。

我们污染了标记（非语义标签），但它允许我们创建每行样式规则：

<强> CSS

pre{
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
pre > div {
    padding-left: 1em;
    text-indent: -1em;
}

我们正在寻找您正在寻找的效果......

结果

Lorem ipsum dolor sit amet，consectetur
  adipiscing elit。
  De malis autem et bonis ab iis animalibus，
  quae nondum depravata sint，ait optime
  iudicari。
  Quae cum praeponunt，ut sit aliqua rerum
  selectio，naturam videntur sequi;准
  ego id curem，quid ille aiat aut neget。

Answer 6

本文提供了一个使用第一个类型的伪选择器的解决方案，它似乎对我来说似乎有用：http://thenewcode.com/50/Classic-Typography-Effects-in-CSS-Hanging-Indent

html{
  margin-left: 100px;
}
p {
	margin: 6em inital;
  width: 300px;
}
p:first-of-type {
	text-indent: -4em;
}

<p>Leverage agile frameworks to provide a robust synopsis for high level 
overviews. Iterative approaches to corporate strategy foster collaborative
  thinking to further the overall value proposition.</p>
<p>Bring to the table win-win survival strategies to ensure proactive domination. 
At the end of the day, going forward, a new normal that has evolved from 
generation X is on the runway heading towards a streamlined cloud solution. 
  User generated content in real-time will have multiple touchpoints for offshoring.</p>

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

6 个答案:

CSS

HTML

结果