使用以下文本保留标题答案

【问题标题】：Keep a Heading with the Following Text使用以下文本保留标题
【发布时间】：2013-10-09 14:15:07
【问题描述】：

我正在使用 css 列计数功能将我的部分分成两列。在一个页面上，我在第一列的底部有一个 h3 标题，在下一列的顶部有以下 p 段。我想将标题与段落的前几句保持一致。我可以通过将两者都包装在使用 inline-block 样式的 div 中来保留整个段落。这适用于短段落，但不适用于长段落。我也可以随意拆分段落，但如果在标题之前添加了额外的内容，我可能不得不将它重新组合在一起，迫使它进入下一列。如果不可能，因为列数是新的，我不会感到惊讶。

更新

根据下面@Jon 的建议，我在知道关键字后尝试从网上找到的示例中破解。

CSS：

.heading-with-text    {
   -webkit-column-break-inside: avoid;
   -moz-column-break-inside: avoid;
   break-inside: avoid;
}

HTML：

<section class="heading-with-text">
    <h3>Blah, Blah</h3>
        <p>woof, woof</p>
</section>

在 OS X 平台上，它在 Firefox 24.0 中根本不起作用。在 Safari 6.0.5 和 Chrome 30.0.1599.66 中，它将标题移动到下一列，使其位于文本上方。但是，无论我在段落中添加了多少文本，浏览器都不会在段落中放置断点。它就像 inline-block 一样工作。我猜他们认为“避免”意味着不惜一切代价避免。这种方法似乎是正确的方法。只是目前没有得到很好的支持。

【问题讨论】：

在 Ubuntu 上的 FF 28 中仍然无法使用。在 Ubuntu 上的 Chrome 中工作！

标签： html css column-count

【解决方案1】：

将标题及其对应内容放在section 中，而不是div：

<section>
  <h3>Keep a Heading with the Following Text</h3>
  <p>I’m using the CSS <code>column-count</code> feature…
</section>

而不是display: inline-block，使用column-break-inside: avoid。这应该提示分列算法不要跨列边界拆分内容。

【讨论】：

这看起来是完美的解决方案。不幸的是，浏览器没有接受提示。我无法让它在最新的 Firefox 上运行。它可以在 Chrome 和 Safari 中使用，但无论我制作段落多长时间，它都不会破坏它，这与 inline-block 相同。测试是在 OS X 中完成的。

【解决方案2】：

2019 年的伪元素黑客攻击 sigh

html:

<div class="entry-text">

   <h2>Heading</h2>

   <p>paragraph</p>

</div>

css:

    entry-text // .page-template-default pages
   {
       columns: 30rem;
       column-gap: 3rem;
   }

    h2::before
    {
        content:".";
        color: transparent;
        display: table;
        page-break-before: auto;
        page-break-after: avoid;
    }

    h2 + p
    {
        page-break-before: avoid;
    }

【讨论】：