仅使用 css 的换行符（如 <br>）答案

【问题标题】：Line break (like <br>) using only css仅使用 css 的换行符（如 <br>）
【发布时间】：2012-06-11 15:02:57
【问题描述】：

是否可以在纯 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> 必须保持在同一行时，我不能这样做。

【问题讨论】：

【解决方案1】：

它是这样工作的：

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

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

【讨论】：

\a 表示换行符，字符 U+000A，white-space: pre 告诉浏览器在渲染时将其视为换行符。
好的，谢谢@JukkaK.Korpela。那么为什么它不首先呈现为换行符呢？虽然这个解决方案很简单，但它仍然会覆盖其他空白命令。
@Steeven，它只覆盖了 :after 伪元素上的 white-space 的初始值，其中仅包含换行符。并且它是必需的，因为在 HTML 中，默认情况下，元素内容中的换行符相当于一个空格，并且不会导致呈现的文档中的换行符。
@Alshten，谢谢，这很有意义，同时也让我感到很奇怪。
绝对不会想到这一点。可惜不能插入 HTML！

【解决方案2】：

试试

h4{ display:block;}

在你的 CSS 中

【讨论】：

【解决方案3】：

您可以使用::after 在<h4> 之后创建一个0px-height 块，这可以有效地将<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>

【讨论】：

【解决方案4】：

我知道我迟到了，但这是我的两分钱。

CSS

li h4 {
   break-after: always;
}

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

【讨论】：