How Can I Prevent Column Breaks Within a List Element in CSS?

Preventing Column Breaks Within an Element

The goal is to prevent content from breaking across multiple columns within an element, ensuring desired rendering. Consider the example below:

HTML:

<div>

CSS:

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

The rendering in Firefox:

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

The goal is to achieve a rendering that prevents content breaks, resulting in a more cohesive display:

• 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

The solution lies in utilizing the break-inside CSS property:

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

This property is supported by all major browsers except Firefox. In Firefox, a workaround using a table can be employed, but it is not an ideal solution.

Update

Firefox 20 now supports page-break-inside: avoid to prevent column breaks, but the following code demonstrates that it still does not work effectively with lists:

CSS:

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

HTML:

<div>

The above is the detailed content of How Can I Prevent Column Breaks Within a List Element in CSS?. For more information, please follow other related articles on the PHP Chinese website!