How to prevent column break within an element?

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.

Prevent line-break of span element

I have a <span> element for which I want to display without any line break. How can I do that?

How to prevent line-break in a column of a table cell (not a single cell)?

How can I prevent automatic line breaks in a column of table (not a single cell)?

prevent column break on a block of text?

I am trying to prevent the following block of text to break, forcing blue package to the right column. HTML is this: <h2 class=blue>Blue Package:</h2> <p><strong>Thurs.<

How to prevent automatic line break

I’ve a div of 200px width and some text in it, how should I prevent automatic line break if the text gets longer than 200px? <div style=overflow:hidden; width:200px;> Long text </div>

How do I position an element within a WPF Grid column?

Let’s say I want to position an element at the coordinates x=20, y=5 within the 3rd column of a Grid control. How do I do this? Do I need to add a Canvas panel to the column and then add the controls

How to count DIV element and insert break line

I would like to insert a break line after the second or third DIV element. Any ideas how to use Jquery ot do that? Thanks <div class=column> <h3>Web Development</h3> <ul> &lt

How to prevent line break at hyphens on all browsers

We have a ckeditor on our CMS. Our end users will input some long articles via that ckeditor. We need a way to prevent line break at hyphens on those articles. Is there anyway to prevent line break at

Prevent Line Break on contentEditable DIV

I have a contentEditable DIV, and i need to prevent the insertion of Line Break on Enter keypress, and allow it only by pressing Shift + Enter I’ve tried: $(.element).on(‘keydown’, function(e) { if

How to prevent page break in QTextDocument block or frame?

Is it possible to prevent page break anywhere inside table in QTextDocument? In my QTextDocument I have a plenty of larger images created from small image blocks. Adding large images seeems to be a wa

swing flow layout break element

I have panel which is using flow layout. How can I make break in flow layout? Like <br/> in html. Some special break element or another trick to indicate that specified element and all subsequen

Answers

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

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

Unfortunately, no browser currently supports this. With Chrome, I was able to use the following, but I couldn’t make anything work for Firefox (See Bug 549114):

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

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 I have not seen it work. See http://jsfiddle.net/bnickel/5qwMf/.

As others mention, you can do overflow: hidden or display: inline-block but this removes the bullets shown in the original question. Your solution will vary based on what your goals are.

A possible workaround for Firefox is to set the CSS property “display” of the element you don’t want to have a break inside to “table”. I don’t know if it works for the LI tag (you’ll probably lose the list -item-style), but it works for the P tag.

Adding;

display: inline-block;

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

Firefox now supports this:

page-break-inside: avoid;

This solves the problem of elements breaking across columns.

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;

The accepted answer is now two years old and things appear to have changed.

This article explains the use of the column-break-inside property. I can’t say how or why this differs from break-inside, because only the latter appears to be documented in the W3 spec. However, the Chrome and Firefox support the following:

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
}

Firefox 26 seems to require

page-break-inside: avoid;

And Chrome 32 needs

-webkit-column-break-inside:avoid;
   -moz-column-break-inside:avoid;
        column-break-inside:avoid;

I made an update of the actual answer.

This seems to be working on firefox and chrome: http://jsfiddle.net/gatsbimantico/QJeB7/1/embedded/result/

.x{
columns: 5em;
-webkit-columns: 5em; /* Safari and Chrome */
-moz-columns: 5em; /* Firefox */
}
.x li{
    float:left;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;  /* Safari and Chrome */
}

Note: The float property seems to be the one making the block behaviour.

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; /* Deprecated Firefox */
-moz-column-break-inside:avoid; /* Current Firefox */
column-break-inside:avoid;
break-inside: avoid; /* IE 10+ */
break-inside: avoid-column;

I just fixed some divs that were splitting onto the next collumn by adding

OVERFLOW: AUTO

to the child divs.

*Realized it only fixes it in Firefox!

This answer might only apply to certain circumstances; If you set a height to your elements, this will be obeyed by the column styling. There-by keeping anything that is contained within that height to a row.

I had a list, like the op, but it contained two elements, items and buttons to act upon those items. I treated it like a table <ul> – table, <li> – table-row, <div> – table-cell put the UL in a 4 column layout. The columns were sometimes being split between the item and it’s buttons. The trick I used was to give the Div elements a line height to cover the buttons.

I had the same problem i think and found a solution in this:

-webkit-column-fill: auto; /* Chrome, Safari, Opera */
-moz-column-fill: auto; /* Firefox */
column-fill: auto;  

Working also in FF 38.0.5: http://jsfiddle.net/rkzj8qnv/