blocks|key|956853|text|我不确定这在<pre>中是否有效，但它看起来很有希望。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|956854|http://www.ehow.com/how_2382848_hanging-indent-css.html|956855|entityMap|0|LINK|mutability|MUTABLE|url^0|6|5|0|0|1J|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@$9|S|A|T|1|U]]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|G]]]]

<p>I'm not sure if this works in <code>&lt;pre&gt;</code>, but it looks promising.</p>

<p><a href="http://www.ehow.com/how_2382848_hanging-indent-css.html" rel="nofollow noreferrer">http://www.ehow.com/how_2382848_hanging-indent-css.html</a></p>


blocks|key|956868|text|text-indent:+-2em;
padding-left:+2em;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|956869|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>text-indent: -2em;
padding-left: 2em;
</code></pre>


blocks|key|1171282|text|这是有可能的。我没有使用<pre>和<code>标签，我不确定这些标签对你有多重要……但我已经能够得到您正在寻找的样式，并尽可能地模仿格式。看看这个。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1171283|http://jsfiddle.net/PVZW5/7/|1171284|CSS|1171285|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;
}|code-block|syntax|javascript|1171286|HTML|1171287|<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>|1171288|看看来自它的this+SO+question和some+solutions。这与你的问题有关。可能值得您花时间看一看:)|1171289|我希望这能帮到你!|1171290|entityMap|0|LINK|mutability|MUTABLE|url|1|https://stackoverflow.com/questions/330229/how-to-apply-a-line-wrapcontinuation-style-with-css|2|http://tardate.com/line-wrap-continuations.htm^0|C|5|I|6|0|0|S|0|0|0|0|0|0|6|G|1|N|E|2|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|H|3|I|5|6|7|1G|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1H|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1I|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1J|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|1K|8|@]|D|@$9|1L|A|1M|1|1N]|$9|1O|A|1P|1|1Q]]|E|$]]|$1|U|3|V|5|6|7|1R|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|G]]|13|$5|Z|10|11|E|$12|14]]|15|$5|Z|10|11|E|$12|16]]]]

<p>It is kind of possible... I'm not using using the <code>&lt;pre&gt;</code> and <code>&lt;code&gt;</code> tags and I'm not sure how important these tags are to you... but I've been able to get the style you're looking for and mimick the formatting as best as I could. Check it out.</p>

<p><a href="http://jsfiddle.net/PVZW5/7/" rel="nofollow noreferrer">http://jsfiddle.net/PVZW5/7/</a></p>

<h2>CSS</h2>

<pre><code>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;
}
</code></pre>

<h2>HTML</h2>

<pre><code>&lt;div&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
    &lt;p&gt;Sed sit amet diam sit amet sem accumsan faucibus ac in arcu.&lt;/p&gt;
    &lt;p&gt;Quisque varius, erat vel euismod ornare, libero orci laoreet velit, at lobortis sem nisl et eros.&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>Take a look at <a href="https://stackoverflow.com/questions/330229/how-to-apply-a-line-wrapcontinuation-style-with-css">this SO question</a> and <a href="http://tardate.com/line-wrap-continuations.htm" rel="nofollow noreferrer">some solutions</a> that have come from it. It is relevant to your question. It might be worth your time to take a look :)</p>

<p>I hope this helps!</p>


blocks|key|1171361|text|本文有一个使用第一类伪选择器的解决方案，到目前为止，这个伪选择器对我来说似乎是有效的：http://thenewcode.com/50/Classic-Typography-Effects-in-CSS-Hanging-Indent|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1171362|​|1171363|html{
++margin-left:+100px;
}
p+{
	margin:+6em+inital;
++width:+300px;
}
p:first-of-type+{
	text-indent:+-4em;
}|code-block|syntax|javascript|1171364|<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>|1171365|1171366|entityMap|0|LINK|mutability|MUTABLE|url|http://thenewcode.com/50/Classic-Typography-Effects-in-CSS-Hanging-Indent^0|17|21|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

<p>This article has a solution using the first-of-type pseudo selector that seems to work so far for me: <a href="http://thenewcode.com/50/Classic-Typography-Effects-in-CSS-Hanging-Indent" rel="nofollow noreferrer">http://thenewcode.com/50/Classic-Typography-Effects-in-CSS-Hanging-Indent</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html{
  margin-left: 100px;
}
p {
	margin: 6em inital;
  width: 300px;
}
p:first-of-type {
	text-indent: -4em;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;</code></pre>
</div>
</div>
</p>


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

<pre><code>&lt;pre&gt;&lt;code&gt;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.&lt;/code&gt;&lt;/pre&gt;
</code></pre>

<p>I've applied <code>white-space: pre-wrap</code> 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:</p>

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


Is it possible to indent wrapped lines within code blocks via CSS?

我在HTML文档中有一些代码。代码本身并不重要-我已经使用lorem ipsum来说明这一点。<pre><code>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed sit amet diam sit amet sem accumsan faucib...

问可以通过CSS在代码块中缩进换行吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以通过CSS在代码块中缩进换行吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以通过CSS在代码块中缩进换行吗？
EN