Keep a Heading with the Following Text

Question

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 know 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.

Pasha

Still doesn't work in FF 28 on Ubuntu. Works in Chrome on Ubuntu! – Use

Answer 1

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;
    }

Cannonry

Answer 2

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.

Cover

That looks like the perfect solution. Unfortunately, the browsers didn't take the hint. I couldn't get it to work at all on the latest Firefox. It worked in Chrome and Safari, but no matter how long I made the paragraph, it wouldn't break it, which is the same as inline-block. The tests were done in OS X. – Pasha

Answer 3

I was looking for a solution for this problem too. It took me a little while to find the right css property, but I solved it with break-after: avoid now.

h2 {   
    -webkit-break-after: avoid;
    break-after: avoid;
}

Issie