Can I control column breaks in an HTML list that uses multicolumn CSS?

Question

What I have is one HTML semantic list spanning three columns via CSS:

ul {column-count: 3;} 

What I want to do is to control where the list items (the <li> elements) break across the columns. It happens to be an alphabetized list, so instead of, say, nine items appearing three each per column, like this:

apple      beet          broccoli 
apricot    blackberry    carrot 
bean       blueberry     cherry

I want them to appear like this:

apple      bean          carrot 
apricot    beet          cherry
           blackberry     
           blueberry 
           broccoli

I have tried this:

Breaks before and after boxes—The break-before and break-after properties are used to control breaks before and after elements.... In this next example, we are forcing a column break before an h2 element.
_{Source: MDN Web Docs—Handling content breaks in multicol}

However, it's not working at the example there (h2 {break-before: column;}) as viewed in Firefox (the h2 remains at the bottom of column 1). Nor is it working on my list (e.g. li.break-here {break-before: column;})

Ideas?

Answer 1

You can use page-break-after: always; and/or page-break-before: always; as style attributes or in classes which you apply to the according li elements. ("page-..." will also apply to the columns in this situation)