title: How to avoid orphaned headings in CSS columns?
body: <p>When using CSS3 columns, what strategies can I use to make sure that <code>h1</code>-<code>h6</code> headers are never orphaned at the bottom of a column?</p>
  
  <p><a href="http://jsfiddle.net/brentonstrine/KLwfC/" rel="nofollow">Here's a JSFiddle demo</a>. Adjust width and you'll see that despite the presence of the following CSS properties meant to discourage a page-break after the heading, it happens anyways in most browsers.</p>
  
  <pre><code>.columnize h1,
  .columnize h2,
  .columnize h3,
  .columnize h4 {
                  break-after: avoid;
             page-break-after: avoid;
   -webkit-column-break-after: avoid;
  }
  </code></pre>
  
  <p>I even spent time messing with the <code>orphans</code> property, but when it works, it works on paragraph lines only, not headings, for some reason.</p>
  
  <pre><code>orphans: 2;
  </code></pre>
  
  <p>This is a deal-breaker for me for CSS columns, since text often has headings. Has anybody found any solutions?</p>