How to Prevent Column Breaks Inside List Items in Multi-Column Layouts?

Preventing Column Breaks Within an Element

When using multi-column layouts, it's common to encounter issues with column breaks splitting elements undesirably. This can occur when an element, such as a list item, is too long to fit within a single column.

Problem Statement

Consider the following HTML and CSS:

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

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

In this scenario, some list items may be split between columns, as seen in the following rendering:

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

The goal is to prevent this splitting and achieve a more desired rendering, such as:

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

Solution: break-inside Property

The solution to this issue lies in utilizing the CSS break-inside property. By setting break-inside: avoid-column on the element you wish to prevent from breaking, you can instruct the browser to keep the element within a single column.

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

This approach is widely supported by major browsers, including Chrome and Safari. However, as per October 2021, Firefox still lacks support for the break-inside property.

Firefox Workaround

For Firefox, a workaround exists involving the use of a table. However, this solution is highly discouraged due to its negative implications.

Page-break-inside Support in Firefox 20

According to a Firefox bug report (Bug 549114), Firefox 20 and later versions now support the use of page-break-inside: avoid to prevent column breaks within an element. However, as demonstrated by the following code snippet, this method does not yet fully address the issue for 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>

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