html - 使用以下文本作为标题

Question

我正在使用 css 列计数功能将我的部分分成两列。在一个页面上，我在第一列的底部有一个 h3 标题，在下一列的顶部有一个接下来的 p 段落。我想保留该段落前几句的标题。我可以将它与整个段落一起包装在一个带有内联 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 中，它将标题移至下一列，使其位于文本上方。但是，无论我在段落中添加多少文本，浏览器都不会在段落中打断。它就像内联 block 一样工作。我猜他们把“避免”理解为不惜一切代价避免。这种方法似乎是正确的方法。只是目前还没有得到很好的支持。

Answer 1

代替 div，将标题及其相应内容放在 section 中:

<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。这应该提示分栏算法不要跨栏边界拆分内容。