如何在使用CSS的元素之前插入换行符
我觉得我看到了一种方法，使用CSS内容属性，在元素之前插入换行符标签。 显然这不起作用：
#restart:before { content: '<br/>'; } 但是，你如何做到这一点？
可以在伪元素生成的内容中使用\A 转义序列 。 阅读更多的CSS2规范。
#restart:before { content: '\A'; }
您可能还需要添加white-space:pre; 到#restart 。
注意： \A表示一行的结尾。
ps另一个待遇是
:before { content: ' '; display: block; }
如果#restart是一个内联元素（例如<span> ， <em>等），那么你可以把它变成一个块元素使用：
#restart { display: block; }
这将具有确保在元素之前和之后的换行的效果。
没有办法让CSS在一个元素之前插入一个行为像换行符的东西，而不是之后。 你可能会在之前引起换行符作为其他变化的副作用，例如float: left ，或者clear: left在一个浮动元素之后，或者甚至像#restart:before { content: 'a load of non-breaking spaces'; }疯狂东西#restart:before { content: 'a load of non-breaking spaces'; } #restart:before { content: 'a load of non-breaking spaces'; }但是这在一般情况下可能不是一个好主意。
这适用于我：
#restart:before { content: ' '; clear: right; display: block; }
只要在前伪元素内放置一个unicode换行符：
#restart:before { content: '\00000A'; }
有两个原因，你不能以你想要的方式通过CSS添加生成的内容：
-
生成的内容接受内容而不是标记。 标记不会被评估，但只显示。
-
:before和:after生成的内容被添加到元素之后，所以即使添加一个空格或字母并将其定义为block也不起作用。
有一个::outside伪元素，可以做你想做的。 但是，似乎没有浏览器支持。 （在这里阅读更多： http ： //www.w3.org/TR/css3-content/#wrapping ）
最好的select是在这里使用一些jQuery：
$('<br />').insertBefore('#restart');
例如： http : //jsfiddle.net/jasongennaro/sJGH9/1/
是的，完全可行，但它绝对是一个彻头彻尾的黑客（人们可能会给你写这样的代码肮脏的外观）。
这里是HTML：
<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>
这是CSS：
#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }
这是小提琴： http : //jsfiddle.net/AprNY/
尝试以下操作：
#restart::before { content: ''; display: block; }
以下CSS为我工作：
/* newline before element */ #myelementId:before{ content:"\a"; white-space: pre; }
假设你想行高为20像素
.restart:before { content: 'First Line'; padding-bottom:20px; } .restart:after { content: 'Second-line'; position:absolute; top:40px; }
插入一个rest之前，我没有运气。 我的解决scheme是添加一个类的跨度，并把跨度内的rest。 然后改变类显示：无; 或根据需要显示：块。
HTML
<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>
CSS
@media only screen and (min-width: 854px) { .ProjItmQty { display: block; clear: both; } } @media only screen and (min-width: 1003px) { .ProjItmQty { display: none; } }
希望这可以帮助。
您也可以使用预编码的HTML实体进行换行 在你的内容，它会有同样的效果。
添加一个margin-top:20px; 到#restart 。 或者你认为合适的尺寸差距。 如果是内联元素，则必须添加display:block或display:inline-block尽pipe我不认为inline-block可以在较早版本的IE上运行。
而不是手动添加一个换行符，你可以做border-bottom: 1px solid #ff0000这将采取元素的边界，只有呈现你指定的任何一方的边框border-<side> 。
