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

我觉得我看到了一种方法，使用 CSS 内容属性，在元素前插入换行标记。很明显，这个方法行不通:

#restart:before { content: '<br/>'; }

但你是怎么做到的？

233710 次浏览
小开

将 margin-top:20px;添加到 #restart。或者你觉得合适的尺寸差距。如果它是一个内联元素，你将不得不添加 display:block或 display:inline-block，虽然我不认为 inline-block工程旧版本的 IE。

小开

如果 #restart是一个内联元素(如 <span>、 <em>等) ，那么你可以使用以下方法将其转换为块元素:

#restart { display: block; }

这将确保在元素之前和之后都有换行符。

没有一种方法可以让 CSS 在元素之前插入类似于断行 只有的东西，而不是在元素之后插入。你可能会因为其他变化的副作用，比如 float: left，或者在浮动元素之后的 clear: left，甚至是像 #restart:before { content: 'a load of non-breaking spaces'; }这样疯狂的变化而导致换行，但是在一般情况下这可能不是一个好主意。

小开

有两个原因可以解释为什么你不能通过 CSS 以你想要的方式添加生成的内容:

  1. 生成的内容接受内容而不是标记。标记将不会被计算但只显示。

  2. :before和 :after生成的内容被添加到元素中，因此即使添加一个空格或字母并将其定义为 block也不起作用。

有一个 ::outside伪元素可以满足您的需要。但是，似乎没有浏览器支持。(点击这里阅读更多: http://www.w3.org/TR/css3-content/#wrapping)

最好的办法是在这里使用一点 jQuery:

$('<br />').insertBefore('#restart');

示例: < a href = “ http://jsfiddle.net/jasongennaro/sJGH9/1/”rel = “ noReferrer”> http://jsfiddle.net/jasongennaro/sjgh9/1/

小开
最佳答案

可以在 CSS2规范中的 psuedo 元素生成的 content. 继续读中使用 \A 逃逸程序。

#restart:before { content: '\A'; }

您可能还需要将 white-space:pre;添加到 #restart。

注意: \A表示一行的结尾。

另外，还有一种治疗方法

:before { content: ' '; display: block; }
小开

是的，完全可行，但这绝对是一个彻头彻尾的黑客行为(人们可能会因为你编写这样的代码而对你不屑一顾)。

下面是 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/

小开

只需在 before 伪元素中放置一个 unicode 换行符:

    #restart::before { content: '\00000A'; }
<p>
The quick brown fox
<span id="restart">jumps over the lazy dog</span>
</p>

小开

不必手动添加换行符，您可以实现 border-bottom: 1px solid #ff0000，它将采用元素的边界，并且只呈现您指定的任何一边的 border-<side>。

小开

这对我有用:

#restart:before {
content: ' ';
clear: right;
display: block;
}
小开

试试以下方法:

#restart::before {
content: '';
display: block;
}
小开

假设您希望行的高度为20px

  .restart:before {
content: 'First Line';
padding-bottom:20px;
}
.restart:after {
content: 'Second-line';
position:absolute;
top:40px;
}
小开

我根本没有运气插入一个休息与: 之前。我的解决方案是添加一个带有类的 span，并将中断放在 span 内。然后根据需要将类更改为 display: none; 或 display: block。

超文本标示语言

    <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 实体作为换行符 &#10;，它将具有相同的效果。

小开

下面的 CSS 对我很有用:

/* newline before element */
#myelementId:before{
content:"\a";
white-space: pre;
}
小开

你可以用 <br>标签来填充你的文档，然后像其他的一样用 css 关闭它们:

<style>
.hideBreaks {
display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>
小开 
body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }

Https://www.w3.org/tr/css2/generate.html#x18 内容属性，“ newlines”... p 不会在父块内的 p 的末尾添加页边距或填充(例如，body’section’p)换行符强制使用行空间，等效样式的行高。


提交答案