html -
仅使用 css的换行符（如）

Question

是否有可能在纯 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;
}

我发现了很多这样的问题，但总是有像“使用显示：块；”这样的答案。<h4>，当必须保持在同一条线上时，我不能这样做。

score 144 · Accepted Answer

它是这样工作的：

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

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

score 8 · Accepted Answer

8

尝试

h4{ display:block;}

在你的 CSS

于 2012-06-07T14:30:24.210 回答

score 6 · Accepted Answer

您可以使用::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>

score 0 · Accepted Answer

我知道我参加聚会迟到了，但这是我的两分钱。

CSS

li h4 {
   break-after: always;
}

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

4 回答 4