4

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>

Improve this question
4
  • I have edited and placed some code so to better understand what I mean. I just need a simple html tag to break the column in a certain point of my choice. Commented May 6, 2017 at 9:13
  • Interesting question, actually. Commented May 6, 2017 at 9:20
  • It would be great if you could accept the answer that helped you the most. Also an upvote is appreciated, as we spend our own private time to help users with their questions. Commented Jun 8, 2017 at 20:58
  • 1
    @LGSon, thanks for pointing. I upvoted but forgot to make it acceptable answer. now done Commented Jun 9, 2017 at 21:28

2 Answers 2

Reset to default
4

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

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

So to my best understanding we need a "break" element, anything like span or even br or hr, or a custom html5 tag, and add css to it with page-break-inside: avoid; break-inside: avoid; right? And place it anywhere where we want the column to break?
@Georg The purpose of CSS columns is to flow over the amount columns or a specific column width, and it tries it best to do that. What you now ask is kind of tell it not to, which with most element types with a specific purpose will come to a cost. If you want specific columns which break where you want, you need to wrap them, as I did with the div, and for CSS columns it has to be a block element (or displayed as one) or else it won't work. Other options is to use a table, or some other column/row based solution, which you can find at the link I posted in my answer
@Georg I also updated my answer with yet another sample, where I combined CSS Columns and CSS Flexbox
when you use ms word or mac pages, in columns you have option to insert a column break wherever you want. For that point the text in column breaks and continues to the next column. I don't want to wrap text in divs or flexbox as it complicates the content modification. I found the solution, see my answer.
Yes, when you use MS Word etc. you can do that, but this is HTML and it can't do that today as no browser support that property (see comment below your 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.

Improve this answer

5 Comments

As I said, it needs to be a block level element, which <br> is not but <hr> is. Still, this won't work since no browser support break-before ... I also tried with your sample code, but still does not work: jsfiddle.net/qwduow4x ... but if you have a snippet that actually work, please update your answer with that code, because it would be interesting to see how that looks like
section { columns: 2; } .breakme { -webkit-column-break-before:always; column-break-before: always; } works fine
I see now, when removing the page-break-before (oddly enough) and use a prefixed -webkit-column-break-before it works in Chrome. Still, not a cross browser solution, so today, you need to use a wrapper if you want it to work in all major browsers
My solution is very buggy and I noticed it freezes Safari.
Yes, there was a reason why I posed my answer...bad browser implementation and compatibility. I recommend you figure a way to make use of my suggested solution

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.