使用以下文本保留标题 [英] Keep a Heading with the Following Text

问题描述

我使用css column-count功能将我的部分分成两列。在一个页面上，我在第一列的底部有一个h3标题，在下一个的顶部有一个p段。我想保留标题与该段的前几句。我可以保持它与整个段落包装在一个div样式与inline-block。这将与短段落，但不是长段。我也可以任意分解段落，但如果在标题强制它到下一列之前添加了额外的内容，我可能必须把它放在一起。

I'm using the css column-count feature to break my section into two columns. On one page, I have an h3 heading at the bottom of the first column and the following p paragraph at the top of the next. I'd like to keep the heading with the first few sentences of the paragraph. I can keep it with the entire paragraph by wrapping both in a div styled with inline-block. This would work with short paragraphs, but not with long ones. I could also arbitrarily break up the paragraph, but I might have to put it back together if additional content was added before the heading forcing it to the next column. I wouldn't be surprised if it's not possible as column-count is new.

UPDATE

根据@Jon下面的建议，我尝试了从我在网上发现的例子中断，因为我知道关键词。

Based on a suggestion by @Jon below, I tried break-inside from examples I found on the Web now that I knew the key word.

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。我想他们避免是指不惜一切代价避免。这种方法似乎是正确的方法。

On an OS X platform, it didn't work at all in Firefox 24.0. In Safari 6.0.5 and Chrome 30.0.1599.66, It moved the heading to the next column so that it was above the text. However, no matter how much text I added to the paragraph, the browsers wouldn't put a break in the paragraph. It worked just like inline-block. I guess they took 'avoid' to mean avoid at all costs. This approach appears to be correct way. It's just not well supported at this time.

推荐答案

而不是 div ，将标题及其相应内容放置在节中：

Instead of a div, place the heading and its corresponding content in a 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 。这应该暗示列分裂算法不会跨列边界拆分内容。

And instead of display: inline-block, use column-break-inside: avoid. This should hint to the column breaking algorithm not to split content across column boundaries.

这篇关于使用以下文本保留标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！