如何使用 CSS 在元素前插入换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7363766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to insert a line break before an element using CSS
提问by mheavers
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:
我觉得我看到了一种使用 CSS content 属性在元素前插入换行标记的方法。显然这不起作用：
#restart:before { content: '<br/>'; }
But how do you do this?
但是你怎么做呢？
回答by bookcasey
It's possible using the \Aescape sequencein the psuedo-element generated content. Read morein the CSS2 spec.
可以在伪元素生成的内容中使用\A转义序列。在 CSS2 规范中阅读更多内容。
#restart:before { content: '\A'; }
You may also need to add white-space:pre;to #restart.
您可能还需要添加white-space:pre;到#restart.
note: \Adenotes the end of a line.
注意：\A表示一行的结束。
p.s. Another treatment to be
ps 另一种治疗方法
:before { content: ' '; display: block; }
回答by bobince
If #restartis an inline element (eg <span>, <em>etc) then you can turn it into a block element using:
如果#restart是内联元素（例如<span>，<em>等），那么您可以使用以下方法将其转换为块元素：
#restart { display: block; }
This will have the effect of ensuring a line break both before and after the element.
这将具有确保元素前后换行的效果。
There is not a way to have CSS insert something that acts like a line break onlybefore an element and not after. You could perhaps cause a line-break before as a side-effect of other changes, for example float: left, or clear: leftafter a floated element, or even something crazy like #restart:before { content: 'a load of non-breaking spaces'; }but this probably isn't a good idea in the general case.
没有办法让 CSS只在元素之前而不是之后插入像换行符一样的东西。您可能会在之前作为其他更改的副作用导致换行，例如float: left，或clear: left在浮动元素之后，甚至是一些疯狂的东西，#restart:before { content: 'a load of non-breaking spaces'; }但这在一般情况下可能不是一个好主意。
回答by hutorny
This works for me:
这对我有用：
#restart:before {
content: ' ';
clear: right;
display: block;
}
回答by Jesse Kinsman
Just put a unicode newline character within the before pseudo element:
只需在 before 伪元素中放置一个 unicode 换行符：
#restart:before { content: '$('<br />').insertBefore('#restart');
000A'; }
回答by Jason Gennaro
There are two reasons why you cannot add generated content via CSS in the way you want:
无法以您想要的方式通过 CSS 添加生成的内容有两个原因：
generated content accepts content and not markup. Markup will not be evaluated but displayed only.
:beforeand:aftergenerated content is added within the element, so even adding a space or letter and defining it asblockwill not work.
生成的内容接受内容而不是标记。标记不会被评估，而只会显示。
:before并且:after生成的内容添加到元素中，因此即使添加空格或字母并将其定义为block也不起作用。
There is an ::outsidepseudo element that might do what you want. However, there appears to be no browser support. (Read more here: http://www.w3.org/TR/css3-content/#wrapping)
有一个::outside伪元素可能会做你想做的。但是，似乎没有浏览器支持。（在此处阅读更多信息：http: //www.w3.org/TR/css3-content/#wrapping）
Best bet is use a bit of jQuery here:
最好的办法是在这里使用一些 jQuery：
/* newline before element */
#myelementId:before{
content:"\a";
white-space: pre;
}
回答by rluks
Following CSS worked for me:
以下 CSS 对我有用：
<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>
回答by hammerbrostime
Yes, totally doable but it is definitely a total hack (people may give you dirty looks for writing such code).
是的，完全可行，但它绝对是一个完全的黑客（人们可能会给你写这样的代码肮脏的外表）。
Here is the HTML:
这是 HTML：
#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }
Here is the CSS:
这是CSS：
#restart::before {
content: '';
display: block;
}
Here is the fiddle: http://jsfiddle.net/AprNY/
这是小提琴：http: //jsfiddle.net/AprNY/
回答by user
Try the following:
请尝试以下操作：
.restart:before {
content: 'First Line';
padding-bottom:20px;
}
.restart:after {
content: 'Second-line';
position:absolute;
top:40px;
}
回答by Kareem
assuming you want the line height to be 20 px
假设您希望行高为 20 px
<div>
<span class="ItmQty"><br /></span>
<span class="otherclass">
<asp:Label ID="QuantityLabel" runat="server" Text="Qty: ">
</asp:Label>
</span>
<div class="cartqty">
<asp:TextBox ID="QuantityTextBox" runat="server" Text='<%# Bind("Quantity","{0:#}") %>' Width="50"></asp:TextBox>
</div>
</div>
回答by Roger
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.
在插入一个中断时我一点运气都没有：before。我的解决方案是添加一个带有类的跨度并将中断放在跨度内。然后将类更改为显示：none; 或显示：根据需要阻止。
HTML
HTML
@media only screen and (min-width: 854px)
{
.ProjItmQty
{
display: block;
clear: both;
}
}
@media only screen and (min-width: 1003px)
{
.ProjItmQty
{
display: none;
}
}
CSS
CSS
##代码##Hope this helps.
希望这可以帮助。
