使用以下文本保留标题

我正在使用css列计数功能将我的部分分为两列。在一页上，我在第一列的底部有一个h3标题，下一个的顶部有下一个p段。我想用本段的前几句话来保持标题。我可以通过将它们包装在一个带有内嵌块的div中来保留整个段落。这将适用于短段落，但不适用于长段。我也可以随意拆分该段落，但如果在将标题强制到下一列之前添加了其他内容，我可能必须将其重新组合。因为列数是新的，所以我不会感到惊讶。使用以下文本保留标题

UPDATE

基于由@乔恩建议下面，我试图突破从里面的例子，我在网上找到现在，我知道的关键词。

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中，它将标题移至下一列，以使其位于文本上方。但是，无论我在段落中添加了多少文本，浏览器都不会在该段落中放置。它像内联块一样工作。我想他们采取'避免'意味着不惜一切代价避免。这种方法似乎是正确的方法。目前尚未得到很好的支持。

来源

2013-10-03 curt

在Ubuntu的FF 28上仍然不起作用。适用于Ubuntu的Chrome！ – SPRBRN

取而代之的是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。这应该暗示列中断算法不要跨列边界拆分内容。

来源

2013-10-03 02:27:58

看起来像是完美的解决方案。不幸的是，浏览器没有提示。我根本无法在最新的Firefox上使用它。它在Chrome和Safari中都有效，但无论我创建段落多长时间，它都不会破坏它，这与内联块相同。测试在OS X中完成。 – curt

使用以下文本保留标题

回答

相关问题