Insert column break in css3 column - css

Question

Is there a way to insert a column break in HTML content using CSS column style, like <hr>, <br> or something else?
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.
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;
}
<section>
<h2>text</h2>
<p>text<p>
<p>text<p>
<h2>text</h2>
<p>text<p>
<p>text<p>
<h2>text</h2>
<p>text<p>
<p>text<p>
<!-- insert column break here, like you can do in word processor -->
<h2>text</h2>
<p>text<p>
<p>text<p>
</section>

Answer 1

The way to break columns is to wrap the elements with a block element, here done with a div
I also removed the margins since they affect how that break renders
section {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
width: 100%;
}
section * {
margin: 0;
}
section div {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
<section>
<div>
<h2>text1</h2>
<p>text1</p>
<p>text1</p>
<h2>text2</h2>
<p>text2</p>
<p>text2</p>
<h2>text3</h2>
<p>text3</p>
<p>text3</p>
</div>
<div>
<h2>text4</h2>
<p>text4</p>
<p>text4</p>
</div>
</section>
Another way is to use a small script, here done with a simple comment as a break marker
window.addEventListener("load", function() {
var div = document.querySelector('section');
div.innerHTML = '<div>' + div.innerHTML.replace(/<!-- break -->/g, '</div><div>') + '</div>';
});
section {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
width: 100%;
}
section * {
margin: 0;
}
section div {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
<section>
<h2>text1</h2>
<p>text1</p>
<p>text1</p>
<h2>text2</h2>
<p>text2</p>
<p>text2</p>
<h2>text3</h2>
<p>text3</p>
<p>text3</p>
<!-- break -->
<h2>text4</h2>
<p>text4</p>
<p>text4</p>
</section>
Here is a few more samples of mine, doing this using a script
Take control of text styled with css columns attribute
Updated based on a comment
Sometimes one need to combine CSS columns with some other technique, i.e. CSS Flexbox
section {
display: flex;
}
section * {
margin: 0;
}
section .columns {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
flex: 2;
}
section .columns {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
section div:not(.columns) {
flex: 1;
}
<section>
<div class="columns">
<h2>Etiam euismod risus ut augue egestas</h2>
<p>Etiam euismod risus ut augue egestas, eget egestas orci efficitur. Nulla at neque et nunc viverra bibendum. Vivamus tincidunt non urna et blandit. Donec nec posuere erat. Nullam consequat velit in rhoncus hendrerit. Vestibulum eu molestie justo. Aenean
mollis dui eget odio blandit, et tempus ligula eleifend. Sed molestie lorem mi, ac condimentum nisi elementum a. Morbi purus dui, hendrerit quis convallis porta, finibus et mi. Maecenas enim tellus, commodo eget tristique quis, elementum quis odio.
Donec nisl urna, aliquam in dui ut, fermentum tristique leo. In viverra venenatis tortor id condimentum. Fusce sed velit ornare, aliquam ante blandit, suscipit purus.</p>
<p>Vivamus non arcu gravida, dignissim orci quis, condimentum metus. Quisque vel orci sollicitudin, sodales arcu sollicitudin, convallis elit. Cras tempor mi id arcu faucibus gravida. Vivamus ac porta tellus. Mauris at sollicitudin leo. Curabitur ultricies
sollicitudin ultricies. Donec condimentum nibh in elementum auctor. Praesent aliquam pharetra ex a pulvinar. Duis vel tincidunt elit. Aenean sem est, bibendum nec euismod quis, egestas a ante. Sed porttitor nulla eget ex accumsan, ac efficitur risus
feugiat. Nulla tempus imperdiet urna eget accumsan. Aenean at ante et sapien vulputate vehicula sodales sit amet est. Sed non ex orci. Nunc diam diam, commodo vitae tempor id, feugiat ultrices risus. In pharetra semper augue ut volutpat.</p>
</div>
<div>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel luctus lectus, tincidunt congue quam. Vestibulum ipsum turpis, dictum in arcu quis, maximus volutpat enim. Mauris eu leo et libero dignissim tempus at id nisi. Nulla tincidunt ut
sapien et porta. Vestibulum non mauris at leo semper molestie quis vel justo. Duis sed neque odio. Sed eget sem ut sapien rhoncus tempus. Mauris maximus diam a nibh scelerisque, in finibus neque pellentesque.</p>
</div>
</section>

Answer 2

To insert a column break inside an element with a css property columns, you need to insert any element with css property column-break-before:always;
It will force the text and other elements to break at that point and continue in following column. I noticed that we cannot do this with <br> but with <hr> it is again possible. For <hr> one might like to hide borders.