How to Prevent List Items from Breaking Across Columns in Multi-Column Layouts?

Preventing Column Breaks Within Elements

In a multi-column layout, you may encounter instances where individual list items break across columns. To prevent this unwanted behavior, the break-inside CSS property can be employed.

Using break-inside

Specifically, setting break-inside: avoid-column for the list item elements will ensure that they are kept intact within a single column:

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

Firefox Compatibility Issues

Unfortunately, as of October 2021, Firefox does not support the break-inside property. While you can use it in other major browsers, you will need a workaround for Firefox.

Workaround for Firefox

A less desirable solution for Firefox is to wrap non-breaking content in a table:

<div class='x'>
    <table>
        <tr><td>Number one</td></tr>
        <tr><td>Number two (longer)</td></tr>
        <tr><td>Number three</td></tr>
    </table>
</div>

Firefox 20 Support (Partial)

Firefox 20 introduced support for page-break-inside: avoid, but it doesn't fully resolve the problem with lists. The following code demonstrates that it still breaks items:

.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>

The above is the detailed content of How to Prevent List Items from Breaking Across Columns in Multi-Column Layouts?. For more information, please follow other related articles on the PHP Chinese website!