title: Insert column break in css3 column
body: <p>Is there a way to insert a column break in HTML content using CSS column style, like <code>&lt;hr&gt;</code>,  <code>&lt;br&gt;</code> or something else?</p>
  
  <p>E.g. you have heading than paragraph than heading than paragraph than heading than paragraph etc, and you want to insert a break at some point after a paragraph, so the column flow stops there and the continuation flows to the next column.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>section {
    columns: 2;
    column-rule: 1pt dashed #ECEEF2;
    column-fill: auto;
    break-inside: avoid; //* this one is done for design purposes, I don't want a css way of column break. */
    column-width: 280px;
    column-gap: 40px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;h2&gt;text&lt;/h2&gt;
    &lt;p&gt;text&lt;p&gt;
    &lt;p&gt;text&lt;p&gt;
  
    &lt;h2&gt;text&lt;/h2&gt;
    &lt;p&gt;text&lt;p&gt;
    &lt;p&gt;text&lt;p&gt;
  
    &lt;h2&gt;text&lt;/h2&gt;
    &lt;p&gt;text&lt;p&gt;
    &lt;p&gt;text&lt;p&gt;
  
    &lt;!-- insert column break here, like you can do in word processor --&gt;
    &lt;h2&gt;text&lt;/h2&gt;
    &lt;p&gt;text&lt;p&gt;
    &lt;p&gt;text&lt;p&gt;
  &lt;/section&gt;
  
      </code></pre>
  </div>
  </div>
  </p>