更好的 CSS 引入标题

Question

编辑 22 年 3 月 18 日：我最近检查了几个使用条款和类似文档，发现此类文档中经常出现插入标题，但总是错误地格式化为<strong>标题，而不是标题，因此这个问题似乎比学术界广泛得多风格指南。

\n

---

\n

多年来我一直在努力解决插入标题的格式。这不是一个小问题，因为学术界和学术工作中的顶级风格之一 APA要求（APA 很严格，不像某些风格指南那样灵活）4 级和 5 级标题的磨合标题（https:// apastyle.apa.org/style-grammar-guidelines/paper-format/headings )

\n

许多其他学术风格也有运行标题 \xe2\x80\x94 例如，芝加哥的五个标题级别；和哈佛扩展的“C”级标题。

\n

我过去只是将插入标题格式化为粗体，但这并不能正确解释辅助技术的文档结构。所以我现在使用下面的 CSS，因为display: run-in当前没有 CSS 选项。结果有问题。

\n

例如，当标题在浏览器页面上换行时，标题后面会出现一个分隔符。有更好的代码建议吗？

\n

H4.enpara {\n  text-indent: 2em;\n  display: inline-block;\n  break-before: column;\n  margin-bottom: -1em;\n}\n\nH4.enpara + P {\n  display: inline;\n  margin: 0 0 .7em 0;\n}\n

\n

Answer 1

@Graham Ritchie的答案似乎效果很好，但不是h4 + p + p, h4 + p + h1.... 希望这对您有用：

h1, h2, h3, h4, h5 {
  font-size: 1rem;
  font-weight: bold;
}

p {
  text-indent: 2rem;
}

h1 {
  text-align: center;
}

h3, h5 {
  font-style: italic;
}

h4, h5 {
  display: inline;
  margin-inline-start: 2rem;
}

h4 + p, h5 + p {
  display: inline;
  margin-inline-start: 0.5rem;
}

h4 + p::after, h5 + p::after {
  content: "";
  display: block;
  margin: 1rem;
}

<h1>H1 heading</h1>
<p>Text following h1</p>
<h2>H2 heading</h2>
<p>Text following h2</p>
<h3>H3 heading</h3>
<p>Text following h3</p>
<h4>H4 heading</h4>
<p>Text following h4</p>
<p>Text following h4 + p</p>
<h4>H5 heading</h4>
<p>Text following h5</p>
<h5>H5 heading following h5 + p</h5>
<p>Text following h5</p>
<h2>H2 heading following h5 + p</h2>
<p>Text following h2</p>