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

170

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

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

但是，你怎么做呢？

css

— 割草机
source

2

CSS不是用于添加或编辑内容，而是用于控制内容的显示方式。

— Todd Moses

40

在我看来，布局和流程（也可以考虑换行）绝对在CSS的范围之内。

— Trevor

12

当CSS是主题的一部分时，它绝对是用于添加或编辑内容的样式元素。特别是对于像Wordpress这样的不允许您编辑内容的内容管理系统，它非常有用。这就是为什么存在“ content”属性的原因。用于添加和/或编辑内容。

— 费伦

266

可以在伪元素生成的内容中使用\A 转义序列。在CSS2规范中阅读更多内容。

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

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

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

ps另一种治疗方法是

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

— 书柜
source

11

也尝试空白：pre-wrap; 如果您想换行。

— 2013年

6

辉煌。但是，应该指出的是，#restart要display: inline;

— Troy Alford

23

这对我不起作用，我:before { content: ' '; display: block; }改用了。

— Bogdanio 2015年

1

由于某种原因，所有解决方案都无法与inline-block元素一起使用。他们根本不会进入下一行。唯一的解决方案是<div></div>在HTML中实际附加一个空白。

— 亚当·里斯

2

如果该行没有中断，则可以使用'white-space'属性：在{content：'\ A'; 空白：pre; }

— Amr

35

如果#restart是内联元素（例如<span>，<em>等），则可以使用以下命令将其转换为块元素：

#restart { display: block; }

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

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

— 博宾斯
source

1

它不能被display：block-因为我需要为元素显示一个宽度，以防止其背景在整个页面上一直运行。它需要能够自动设置元素的宽度。

— mheavers 2011年

3

一个float: left元素可能是一些使用的，因为它们收缩以配合并开始在新的一行。否则，您可能无法实现所需的功能。

— bobince 2011年

投票不足的原因是有时开发人员在一个大型项目中工作，他们无法控制或无法决定应用其他解决方案。

— eyurdakul 2014年

19

这对我有用：

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

— Hutorny
source

由于某种原因，换行的各种unicode字符对我不起作用..？这个解决方案虽然成功了-谢谢！

— Gene Bo

1

是的，但是当您也必须在内容中添加文本时会发生什么！？回答

— 的SándorZuboly

12

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

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

— 杰西·金斯曼
source

11

以下CSS对我有用：

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

— 鲁克
source

简单的CSS的好主意

— NaveenDA's

对我来说是一种魅力。我正在使用：content: 'bar: \a' attr(data-description);

— Jimmy Adaro

这是正确的答案👍

— cronoklee

10

无法以所需方式通过CSS添加生成的内容有两个原因：

生成的内容接受内容而不是标记。标记将不会评估，只会显示。
:before并且将:after生成的内容添加到该元素内，因此即使添加空格或字母并将其定义为block也不起作用。

有一个::outside伪元素可能会执行您想要的操作。但是，似乎没有浏览器支持。（在此处了解更多信息：http : //www.w3.org/TR/css3-content/#wrapping）

最好的选择是在这里使用一些jQuery：

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

示例： http ：//jsfiddle.net/jasongennaro/sJGH9/1/

— 杰森·根纳罗（Jason Gennaro）
source

“使用CSS”。我找到了与杰西·金斯曼（Jesse Kinsman）的作品类似的答案。

— RonnyKnoxville

4

是的，完全可行，但这绝对是一桩黑文（人们可能会因编写此类代码而使您看上去很脏）。

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

— Hammerbrostime
source

+1创造力。我已经从外部来源获取了一些内容，并且无法更改实际的HTML ...这似乎可以正常工作:)谢谢！

— 2013年

3

请尝试以下操作：

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

— 用户
source

提示：至少添加一个单行注释，这样默认情况下您的帖子就不会出现在VLQQ中。

— Deduplicator 2014年

1

假设您希望线高为20像素

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

— 卡里姆
source

1

与：be插入一个中断对我一点运气都没有。我的解决方案是添加一个带有类的跨度并将中断放在跨度内。然后将类更改为显示：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;
    }
}

希望这可以帮助。

— 罗杰
source

1

您可以<br>像使用其他标签一样，使用标签填充文档并使用css打开/关闭标签：

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

— 杰克·汉默
source

0

您还可以将预编码的HTML实体用于内容中的换行符
，其效果相同。

— 亨利·吉布森
source

0

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”换行符强制换行，等效于样式的行高。

— 马克·斯图尔特
source

-1

一个添加margin-top:20px;到#restart。或您认为合适的任何尺寸差距。如果这是一个内联元素，则必须添加，display:block或者display:inline-block尽管我认为不适inline-block用于旧版本的IE。

— 朋克摇滚乐队
source

没问题的是，元素的显示类型是内联块，因此我需要在元素之前休息一下。

— mheavers 2011年

显示类型已经是内联块。我正在尝试使用content属性来完成我上面的要求。

— mheavers 2011年

您不能使用content属性添加html元素，这是不可能的。

— punkrockbuddyholly

因为您的回答不会解决他的问题。查看获胜的答案，其中详细介绍了一种使用content属性（不接受html元素）提供换行符的方法。也许这是对原始问题的误解。

— pdwalker 2014年

-1

您无需执行手动添加换行符的方法，而是可以实现border-bottom: 1px solid #ff0000该方法，该方法将采用元素的边框，并且仅呈现border-<side>您指定的任意一侧。

— Andy4thehuynh
source

2

OP要求的等价<br>，而不是<hr>。

— Beni Cherniavsky-Paskin 2014年