How to Prevent Column Breaks Within List Items in CSS?

Prevent Column Break within an Element

In the realm of CSS and responsive design, it's often desirable to ensure that specific elements remain intact within a given column. Consider this HTML structure representing a list:

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

Now, let's apply some CSS to create multiple columns:

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

Initially, Firefox renders this as follows:

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

As evident, item four is split between the second and third columns. To avoid this, the break-inside CSS property comes to our aid:

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

Unfortunately, Firefox currently lacks support for this property. Therefore, alternative solutions are required for Firefox. One workaround involves wrapping the non-breaking content in a table, although this is less than ideal.

Update:

Firefox 20 includes support for page-break-inside: avoid as a mechanism to prevent column breaks. However, the following code demonstrates that it does not work as expected 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 Within List Items in CSS?. For more information, please follow other related articles on the PHP Chinese website!