代码之家 › 专栏 › 技术社区 › davidchambers

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

css

davidchambers · 技术社区 · 14 年前

<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.

6 回复 | 直到 14 年前

Community CDub 8 年前

有可能。。。我没有使用 <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 来自它的。这与你的问题有关。也许值得你花点时间看看:)

我希望这有帮助!

davidchambers 14 年前

不幸的是,经过大量的搜索,我开始相信这是目前不可能单独使用CSS。每个“行”需要一个伪元素(文本匹配) /^.*$/m ),这将启用行的缩进 超越第一个 通过CSS控制。

我在www风格的邮件列表中提出了这个问题。 fantasai's responses 很有希望,特别是 text-indent 属性可以扩展以允许 text-indent: 2em hanging each-line .

William Niu 14 年前

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

Stephen M. Harris 11 年前

目前不可能只使用CSS,但在脚本语言的帮助下。。。

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悲哀坐在阿梅特,康塞特图尔
再见,精英。
动物的身体和身体,
ait optime圣德普拉瓦塔码头

我是一个好朋友,我是一个好朋友
selectio、naturam videntur sequi、准

Necromancer 7 年前

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>

-1

DLH 14 年前

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

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