How to prevent column break within an element?

break-inside: avoid-column
break-inside avoid not working
css columns
css columns uneven
css column-count
page-break-inside
unexpected unknown property column-break-inside
css break inside prefix

Consider the following HTML:

<div class='x'>
    <ul>
        <li>Number one</li>
        <li>Number two</li>
        <li>Number three</li>
        <li>Number four is a bit longer</li>
        <li>Number five</li>
    </ul>
</div>

and the following CSS:

.x {
    -moz-column-count: 3;
    column-count: 3;
    width: 30em;
}

As it stands, Firefox currently renders this similarly to the following:

• Number one    • Number three          bit longer
• Number two    • Number four is a    • Number five

Notice that the fourth item was split between the second and third column. How do I prevent that?

The desired rendering might look something more like:

• Number one    • Number four is a
• Number two      bit longer
• Number three  • Number five

or

• Number one    • Number three        • Number five
• Number two    • Number four is a
                  bit longer

Edit: The width is only specified to demonstrate the unwanted rendering. In the real case, of course there is no fixed width.

The correct way to do this is with the break-inside CSS property:

.x li {
    break-inside: avoid-column;
}

Unfortunately, as of October 2019, this is not supported in Firefox but it is supported by every other major browser. With Chrome, I was able to use the above code, but I couldn't make anything work for Firefox (See Bug 549114).

The workaround you can do for Firefox if necessary is to wrap your non-breaking content in a table but that is a really, really terrible solution if you can avoid it.

UPDATE

According to the bug report mentioned above, Firefox 20+ supports page-break-inside: avoid as a mechanism for avoiding column breaks inside an element but the below code snippet demonstrates it still not working with lists:

.x {
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
}

.x li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}
<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</div>

break-inside, The correct way to do this is with the break-inside CSS property: .x li { break-​inside: avoid-column; }. Unfortunately, as of October 2019, this is  for list items, this can work if you embed the content of the list item (li) within a "span" element set with the "display:inline-block". The situation is much more complex if you want to control where to break pages or columns within tables : you would like to avoid breaks within table rows (tr).

Adding;

display: inline-block;

to the child elements will prevent them being split between columns.

How to prevent column break within an element?, The break-inside CSS property sets how page, column, or region breaks should behave Keyword values */ break-inside: auto; break-inside: avoid; Each possible break point (in other words, each element boundary) is  Fortunately, you can tell the browser to keep specific elements together with break-inside. At the moment, the property universally accepts the values auto and avoid. Use avoid on an element within a multi-column layout to keep the property from breaking apart.

set following to the style of the element that you don't want to break:

overflow: hidden; /* fix for Firefox */
break-inside: avoid-column;
-webkit-column-break-inside: avoid;

break-inside, Prevent column-break when using column-count 20px; -o-column-gap: 20px; column-gap: 20px; list-style: inside none; padding: 0; } How to prevent line breaks in the list of items using CSS? The display:inline-block property is used to show an element in the inline-level block container. It converts the block of elements into an inline element.

As of October 2014, break-inside still seems to be buggy in Firefox and IE 10-11. However, adding overflow: hidden to the element, along with the break-inside: avoid, seems to make it work in Firefox and IE 10-11. I am currently using:

overflow: hidden; /* Fix for firefox and IE 10-11  */
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
break-inside: avoid-column;

Prevent column-break when using column-count (Example), When a column breaks, a block-level element such as a paragraph of text You may want to avoid breaks inside tables, code snippets, lists of  Set size and make inline. Even if you were to reduce the size of a Div one to make room for the other div, because they are block elements you would be left with space next to Div one and Div two below Div one. To move the div up to the next line both div's need to have the inline-block display setting as shown below.

Firefox now supports this:

page-break-inside: avoid;

This solves the problem of elements breaking across columns.

break-inside, The CSS break-after property allows you to force a break on multi-column layouts​. More specifically, it allows you to force a break after an element. without necessarily forcing a page break */ h2, h3 { break-after: avoid; break-inside: avoid​; } Prior to Firefox 65, the older property of page-break-inside will work in Firefox to prevent breaks in columns, as well as pages. Add both properties for backwards compatibility. For older WebKit-based browsers, the prefixed property -webkit-column-break-inside can be used to control column breaks.

break-after · WebPlatform Docs, Avoid a column break inside the current element. inherit. Takes the value of this property from the computed style of the parent element. Definition and Usage. The page-break-inside property sets whether a page-break should be avoided inside a specified element. Tip: The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed. Note: You cannot use this property on absolutely positioned elements.

-webkit-column-break-inside property CSS (Cascading Style Sheets), The break-inside property controls breaks inside elements when they are The value avoid-column would prevent a break in multicol contexts. If any of the three concerned values is a forced break value ( always, left, right, page, column, or region ), it has precedence. If more than one of them are such a break, the one of the element that appears the latest in the flow is taken (i.e., the break-before value has precedence over the break-after value,

Breaking Boxes With CSS Fragmentation, The space at the top of this block varies, depending on the number of LI elements​, because the bottom padding of the #example element changes</p>. 8. <p>. 9. If you format a document with columns (as in some newsletter layouts), the text will automatically flow from one column to the other. You can insert your own column breaks for more control over the document format. Place your cursor where you want the column to break. Click Layout > Breaks. In Word 2013 or Word 2010, click Page Layout > Breaks.

Comments
  • have you tried to give that li a standalone style? like <li style="width: ???px">Number four is a bit longer</li> ???px = needed width to fit that number four.
  • I believe Opera 11.5 supports break-inside: avoid-column
  • Looking at Comment 15 page-break-inside:avoid should work in FF 20.
  • At year 2014, the right syntax seems to be: -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid;
  • @CarlesJoveBuxeda Not seeing any improvement in Firefox 31. Neither column-break-inside or page-break-inside (with or without prefix) are working.
  • It's a little late, but as this is still an issue in 2018 this might be useful to others who end up here. If anyone is still having bugs between browsers with this, overflow: hidden is the better option. display: inline-block; causes new quirks with Chrome, unfortunately.
  • This is good. A possible way to prevent the bad behavior of inline-block causing stuff to now get squished on one line (if they are too short) is to further wrap this with a display:block element. This will likely be a solid Firefox workaround for now.
  • This solution removes the list item, so if you're using order lists for example this wouldn't be an alternative.
  • Works perfectly for splitting up paragraphs into columns.
  • for list items, this can work if you embed the content of the list item (li) within a "span" element set with the "display:inline-block". The situation is much more complex if you want to control where to break pages or columns within tables : you would like to avoid breaks within table rows (tr). Really, multi-columns layouts are still difficult to setup, but we need it to allow sites to adapt to very narrow screens (such as smartphones) and to wide displays (where very narrow colulns are really unfair.
  • Works for my <li> but I had to add width:100%; to prevent them from stacking horizontally.