使用以下文本保留標題

我正在使用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

使用以下文本保留標題

回答

相關問題