仅使用CSS的换行符（如<br>

是否有可能在纯CSS中（即不添加其他html标签）使像这样的换行符<br>？我想在<h4>元素之后而不是之前换行：

的HTML

<li>
  Text, text, text, text, text. <h4>Sub header</h4>
  Text, text, text, text, text.
</li>

的CSS

h4 {
  display: inline;
}

我发现了许多这样的问题，但是总是有诸如“ use display：block;”之类的答案。，但<h4>必须保持在同一行时，这是我做不到的。

html css styling

— 史蒂文
source

为什么这个元素是h4？为什么在这样的地方使用它？

— toniedzwiedz 2012年

出于好奇，您不想使用<br/>的原因是什么？

— 菲利普·柯比布里德

原因：我有很多列表元素。我也想知道是否存在一个优雅的解决方案。在元素之间使用br标签通常不是很好（我认为标头是其自身的元素）

— Steeven 2012年

@Tom，这是一个简化的示例。我在每个列表元素中都有som文本和标题。

— Steeven 2012年

— 用户

Answers:

134

它是这样的：

h4 {
    display:inline;
}
h4:after {
    content:"\a";
    white-space: pre;
}

诀窍来自这里：https：//stackoverflow.com/a/66000/509752（有更多说明）

— 肾上腺素
source

\a表示换行符，字符U + 000A，并white-space: pre告诉浏览器将其视为渲染中的换行符。

— Jukka K. Korpela 2012年

好的，谢谢@ JukkaK.Korpela。那么为什么不首先将其呈现为换行符呢？尽管此解决方案很简单，但它仍将覆盖其他空白命令。

— Steeven 2012年

@Steeven，它仅覆盖伪元素的初始值，white-space该:after伪元素仅包含换行符。这是必需的，因为在HTML中，默认情况下，元素内容中的换行符等于空格，并且不会在呈现的文档中引起换行符。

— Jukka K. Korpela 2012年

@Alshten，谢谢，很有道理，同时让我完全感到奇怪。

— sonjz

永远都不会想到这一点。可惜不能插入HTML！

— Lodewijk 2014年

尝试

h4{ display:block;}

在你的CSS

— 菲利普·柯比布莱德
source

加上一些明智的使用，margin-bottom应该可以帮助您到达那里。

— 杰里米·霍洛瓦奇

但是，如果我理解得很好，则h4必须与之前的文字在同一行。使用display：block，在h4之前有一个换行符。

— adriantoine 2012年

什么？margin-bottom将h4与前面的文本放在同一行？

— Steeven 2012年

!! 这不是一个可行的解决方案：在Safari之类的浏览器中，之后的行将“显示：无”！

— Gregdebrick

您可以在后面::after创建一个0px-height块<h4>，该块可以有效地将后面的任何内容移动<h4>到下一行：

h4 {
  display: inline;
}
h4::after {
  content: "";
  display: block;
}

<ul>
  <li>
    Text, text, text, text, text. <h4>Sub header</h4>
    Text, text, text, text, text.
  </li>
</ul>

— 0b10011
source