Keep a Heading with the Following Text

问题

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

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>

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.

回答1:

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>

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.

回答2:

pseudo element hack in 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;
    }

来源：https://stackoverflow.com/questions/19149745/keep-a-heading-with-the-following-text

标签

html

css3

column-count