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

前端之家收集整理的这篇文章主要介绍了是否可以通过CSS缩进代码块中的包装线?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在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>

我已经应用了空格:预包装到代码块,以强制长行包装。我想知道是否可以缩进包装线的包裹部分,给出这样的东西:

Lorem ipsum dolor sit amet,at lobortis sem nisl et eros.

解决方法

这是可能的…我没有使用< 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,at lobortis sem nisl et eros.</p>
</div>

看看来自它的this SO questionsome solutions。这与你的问题有关。这可能值得你看看的时间:)

我希望这有帮助!

猜你在找的CSS相关文章