可以通过CSS在代码块中缩进换行吗？
可以通过CSS在代码块中缩进换行吗？
提问于 2010-08-13 22:10:07
我在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.回答 4
Stack Overflow用户
发布于 2010-08-13 22:36:06
这是有可能的。我没有使用<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>看看来自它的this SO question和some solutions。这与你的问题有关。可能值得您花时间看一看:)
我希望这能帮到你!
Stack Overflow用户
发布于 2010-08-13 22:23:32
text-indent: -2em;
padding-left: 2em;Stack Overflow用户
发布于 2018-05-09 22:21:41
本文有一个使用第一类伪选择器的解决方案，到目前为止，这个伪选择器对我来说似乎是有效的：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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3477625
复制相关文章
相似问题