Consider the following HTML:
- Number one
- Number two
&
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.
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>
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.
UPDATE 2 Since Firefox does prevent breaking on display:table
and display:inline-block
a reliable but non-semantic solution would be to wrap each list item in its own list and apply the style rule there:
.x {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
width: 30em;
}
.x ul {
margin: 0;
-webkit-column-break-inside: avoid; /* Chrome, Safari */
page-break-inside: avoid; /* Theoretically FF 20+ */
break-inside: avoid-column; /* IE 11 */
display:table; /* Actually FF 20+ */
}
<div class='x'>
<ul>
<li>Number one, one, one, one, one</li>
</ul>
<ul>
<li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
</ul>
<ul>
<li>Number three</li>
</ul>
</div>
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;
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;
I just fixed some div
s that were splitting onto the next column by adding
overflow: auto
to the child div
s.
*Realized it only fixes it in Firefox!
I faced same issue while using card-columns
i fixed it using
display: inline-flex ;
column-break-inside: avoid;
width:100%;