Question

我觉得我看到了一种方法，使用CSS内容属性，在元素之前插入换行标记。显然这不起作用：

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

但你是怎么做到的？

Answer 1

可以在psuedo-element生成的内容中使用\A escape sequence。 CSS2规范中的Read more。

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

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

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

P.S。

的另一种治疗方法

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

Answer 2

如果#restart是内联元素（例如<span>，<em>等），那么您可以使用以下方法将其转换为块元素：

#restart { display: block; }

这样可以确保元素前后的换行符。

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

Answer 3

这对我有用：

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

Answer 4

只需将一个unicode换行符放在before伪元素中：

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

Answer 5

有两个原因导致您无法以您希望的方式通过CSS添加生成的内容：

生成的内容接受内容而非标记。标记不会被评估，只会显示。
:before和:after生成的内容已添加到元素中，因此即使添加空格或字母并将其定义为block也无效。
< / LI>
有一个::outside伪元素可能会做你想要的。但是，似乎没有浏览器支持。（在此处阅读更多内容：http://www.w3.org/TR/css3-content/#wrapping）

最好的办法是在这里使用一些jQuery：
```
$('<br />').insertBefore('#restart');
```
示例： http://jsfiddle.net/jasongennaro/sJGH9/1/

Answer 6

以下CSS为我工作：

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

Answer 7

是的，完全可行，但绝对是一个彻头彻尾的黑客攻击（人们可能会因为编写这样的代码而给你带来肮脏的外表）。

这是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/

Answer 8

尝试以下方法：

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

Answer 9

假设您希望行高为20 px

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

Answer 10

在以前插入休息时，我没有运气。我的解决方案是添加一个带有类的span，并将break放在span中。然后将类更改为display：none;或显示：根据需要阻止。

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

希望这有帮助。

Answer 11

您还可以在预先编码的HTML实体中使用内容中的换行符
，它会产生相同的效果。

Answer 12

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

https://www.w3.org/TR/CSS2/generate.html#x18 内容属性“换行符” ... p不会在父块内的p的末尾添加边距或填充（例如，正文›部分› p）。 “ \ A”换行符会强制换行，等效于样式的行高。

Answer 13

将margin-top:20px;添加到#restart。或者你觉得合适的尺寸差距。如果它是内联元素，则您必须添加display:block或display:inline-block，但我认为inline-block不适用于旧版本的IE。

Answer 14

不是以某种方式手动添加换行符，而是可以执行border-bottom: 1px solid #ff0000，它将获取元素的边框，并且只渲染border-<side>指定的任何一方。

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

14 个答案: