blocks|key|570750|text|在psuedo-+escape+sequence生成的内容中使用\A元素是可能的。CSS2规范中的Read+more。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|570751|#restart:before+{+content:+'\A';+}|code-block|syntax|javascript|570752|您可能还需要在#restart中添加white-space:pre;。|570753|注意：\A表示一行的结束。|570754|附注：另一种治疗方法是|570755|:before+{+content:+'+';+display:+block;+}|570756|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/International/questions/qa-escapes#cssescapes|1|http://www.w3.org/TR/CSS2/generate.html#x18^0|W|2|9|F|0|1D|9|1|0|0|7|8|I|G|0|3|2|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]|$9|18|A|19|1|1A]]|E|$]]|$1|F|3|G|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1K|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1L|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]|10|$5|V|W|X|E|$Y|11]]]]

It's possible using the <code>\A</code> <a href="http://www.w3.org/International/questions/qa-escapes#cssescapes">escape sequence</a> in the psuedo-element generated content. <a href="http://www.w3.org/TR/CSS2/generate.html#x18">Read more</a> in the CSS2 spec.

<pre><code>#restart:before { content: '\A'; }
</code></pre>

You may also need to add <code>white-space:pre;</code> to <code>#restart</code>.

note: <code>\A</code> denotes the end of a line.

p.s. Another treatment to be 

<pre><code>:before { content: ' '; display: block; }
</code></pre>

blocks|key|570894|text|这对我来说很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|570895|#restart:before+{
++++content:+'+';
++++clear:+right;
++++display:+block;
}|code-block|syntax|javascript|570896|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This works for me:

<pre><code>#restart:before {
 content: ' ';
 clear: right;
 display: block;
}
</code></pre>

blocks|key|571105|text|下面的CSS对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|571106|/*+newline+before+element+*/
#myelementId:before{
++++content:"\a";
++++white-space:+pre;
}|code-block|syntax|javascript|571107|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Following CSS worked for me:

<pre><code>/* newline before element */
#myelementId:before{
 content:"\a";
 white-space: pre;
}
</code></pre>

blocks|key|570833|text|只需在前面的伪元素中添加一个unicode换行符：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|570834|#restart:before+{+content:+'\00000A';+}|code-block|syntax|javascript|570835|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Just put a unicode newline character within the before pseudo element:

<pre><code>#restart:before { content: '\00000A'; }
</code></pre>

blocks|key|570782|text|是的，这是完全可行的，但这绝对是一个完全的黑客行为(人们可能会因为编写这样的代码而给你难看的眼神)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|570783|下面是HTML：|570784|<div>lorem+ipdum+dolor+sit+<span+id="restart">amit+e+pluribus+unum</div>|code-block|syntax|javascript|570785|下面是CSS：|570786|#restart:before+{+content:+'hiddentext';+font-size:0;+display:block;+line-height:0;+}|570787|这里是小提琴：http://jsfiddle.net/AprNY/|offset|length|570788|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/AprNY/^0|0|0|0|0|0|7|Q|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

Yes, totally doable but it is definitely a total hack (people may give you dirty looks for writing such code).

Here is the HTML:

<pre><code>&lt;div&gt;lorem ipdum dolor sit &lt;span id="restart"&gt;amit e pluribus unum&lt;/span&gt;&lt;/div&gt;
</code></pre>

Here is the CSS:

<pre><code>#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }
</code></pre>

Here is the fiddle:
<a href="http://jsfiddle.net/AprNY/" rel="nofollow">http://jsfiddle.net/AprNY/</a>

blocks|key|570915|text|尝试以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|570916|#restart::before+{
++content:+'';
++display:+block;
}|code-block|syntax|javascript|570917|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try the following:

<pre><code>#restart::before {
 content: '';
 display: block;
}
</code></pre>

blocks|key|571187|text|您可以使用 标记填充您的文档，并使用css打开\关闭它们，就像其他任何标记一样：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|571188|<style>
.hideBreaks+{
+display:none;
}
</style>
<html>
just+a+text+line<br+class='hideBreaks'>+for+demonstration
</html>|code-block|syntax|javascript|571189|entityMap^0|5|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

You can populate your document with <code>&lt;br&gt;</code> tags and turn them on\off with css just like any others:

<pre><code>&lt;style&gt;
.hideBreaks {
 display:none;
}
&lt;/style&gt;
&lt;html&gt;
just a text line&lt;br class='hideBreaks'&gt; for demonstration
&lt;/html&gt;
</code></pre>

blocks|key|786985|text|假设您希望线条高度为20px|type|unstyled|depth|inlineStyleRanges|entityRanges|data|786986|++.restart:before+{+
+++++content:+'First+Line';
+++++padding-bottom:20px;
++}
++.restart:after+{+
++++content:+'Second-line';
++++position:absolute;
++++top:40px;
++}|code-block|syntax|javascript|786987|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

assuming you want the line height to be 20 px

<pre><code> .restart:before { 
 content: 'First Line';
 padding-bottom:20px;
 }
 .restart:after { 
 content: 'Second-line';
 position:absolute;
 top:40px;
 }
</code></pre>

blocks|key|787039|text|我在插入一个断点:之前一点也不走运。我的解决方案是添加一个包含类的span，并在span中添加断点。然后根据需要将类更改为display:+none；或display:+block。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|787040|HTML|787041|++++<div>
+++++++++<span+class="ItmQty"><br+/>
+++++++++<span+class="otherclass">
++++++++++++++<asp:Label+ID="QuantityLabel"+runat="server"+Text="Qty:+">++++++
++++++++++++++</asp:Label>
+++++++++
+++++++++<div+class="cartqty">
++++++++++++++<asp:TextBox+ID="QuantityTextBox"+runat="server"+Text='<%25#+Bind("Quantity","{0:#}")+%25>'+Width="50"></asp:TextBox>

+++++++++</div>
++++</div>|code-block|syntax|javascript|787042|CSS|787043|@media+only+screen+and+(min-width:+854px)
{
++++.ProjItmQty
++++{
++++++++display:+block;
++++++++clear:+both;
++++}
}
@media+only+screen+and+(min-width:+1003px)
{
++++.ProjItmQty
++++{
++++++++display:+none;
++++}
}|787044|希望这能有所帮助。|787045|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I had no luck at all with inserting a break with :before. My solution was to add a span with a class and put the break inside the span. Then change the class to display: none; or display: block as needed.

HTML

<pre><code> &lt;div&gt;
 &lt;span class="ItmQty"&gt;&lt;br /&gt;&lt;/span&gt;
 &lt;span class="otherclass"&gt;
 &lt;asp:Label ID="QuantityLabel" runat="server" Text="Qty: "&gt; 
 &lt;/asp:Label&gt;
 &lt;/span&gt;
 &lt;div class="cartqty"&gt;
 &lt;asp:TextBox ID="QuantityTextBox" runat="server" Text='&lt;%# Bind("Quantity","{0:#}") %&gt;' Width="50"&gt;&lt;/asp:TextBox&gt;

 &lt;/div&gt;
 &lt;/div&gt;
</code></pre>

CSS

<pre><code>@media only screen and (min-width: 854px)
{
 .ProjItmQty
 {
 display: block;
 clear: both;
 }
}
@media only screen and (min-width: 1003px)
{
 .ProjItmQty
 {
 display: none;
 }
}
</code></pre>

Hope this helps.

blocks|key|787088|text|您还可以将预编码的HTML实体用于内容中的换行符&#10;，它将具有相同的效果。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|787089|entityMap^0|O|5|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

You can also use the pre-encoded HTML entity for a line break <code>&amp;#10;</code> in your content and it'll have the same effect.

blocks|key|571265|text|body+*+{+line-height:+127%25;+}
p:after+{+content:+"\A+";+display:+block;+white-space:+pre;+}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|571266|https://www.w3.org/TR/CSS2/generate.html#x18内容属性，“换行”...P不会在父块内p的末尾添加边距或填充(例如，正文>节>+p)。“\”换行符强制行间距，等同于样式的行高。|unstyled|offset|length|571267|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3.org/TR/CSS2/generate.html#x18^0|0|0|18|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }
</code></pre>

<a href="https://www.w3.org/TR/CSS2/generate.html#x18" rel="nofollow noreferrer">https://www.w3.org/TR/CSS2/generate.html#x18</a>
The Content Proerty, "newlines"... p will not add margin nor padding at end of p inside parent block (e.g., body › section › p). "\A " line break forces line space, equivalent styled line-height.

blocks|key|786938|text|除了手动添加换行符之外，您还可以实现border-bottom:+1px+solid+#ff0000，它将获取元素的边框，并且只呈现您指定的任何一侧的border-<side>。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|786939|entityMap^0|I|W|23|D|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

Instead of manually adding a line break somehow, you can do implement <code>border-bottom: 1px solid #ff0000</code> which will take the element's border and only render <code>border-&lt;side&gt;</code> of whichever side you specify.

blocks|key|570723|text|向#restart添加margin-top:20px;。或者任何你认为合适的大小差距。如果它是一个内联元素，你必须添加display:block或display:inline-block，尽管我不认为inline-block可以在老版本的IE上工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|570724|entityMap^0|1|8|B|G|1N|D|21|K|2S|C|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|G|$]]

Add a <code>margin-top:20px;</code> to <code>#restart</code>. Or whatever size gap you feel is appropriate. If it's an inline-element you'll have to add <code>display:block</code> or <code>display:inline-block</code> although I don't think <code>inline-block</code> works on older versions of IE.

I feel like I saw a way, using the CSS content property, to insert a line break tag before an element. Obviously this doesn't work:

<pre><code>#restart:before { content: '&lt;br/&gt;'; }
</code></pre>

But how do you do this?

How to insert a line break before an element using CSS

我感觉我看到了一种方法，使用CSS内容属性在元素之前插入一个换行符标记。显然这是行不通的：#restart:before { content: ' '; }但是如何做到这一点呢？

问如何使用CSS在元素前插入换行符
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS在元素前插入换行符EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS在元素前插入换行符
EN