How to Prevent Content from Breaking Across CSS Columns?

How to Prevent Column Break Within an Element: A Comprehensive Guide

Problem:
In web design, when content is formatted using CSS columns, it's possible for the content to wrap between columns, resulting in a visually undesirable effect. For instance, a list can be broken up across multiple columns, disrupting its continuity.

Solution:
To prevent this undesirable break, the break-inside CSS property can be used. By setting it to avoid-column, the browser is instructed to keep content within the same column whenever possible.

Example:
To prevent line breaks within list items in a multi-column layout:

.list-container {
    column-count: 3;
}

.list-container li {
    break-inside: avoid-column;
}

Browser Support:
Unfortunately, as of October 2021, Firefox does not fully support break-inside: avoid-column. However, this property is supported by all major browsers except Firefox.

Workaround for Firefox:
For Firefox, a workaround can be used to prevent column breaks within list items: wrapping the content in a table.

<div class="container">
    <table>
        <tbody>
            <tr>
                <th>Number</th>
                <th>Description</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Number one, one, one, one, one</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Number two, two, two, two, two, two, two, two, two, two, two, two</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Number three</td>
            </tr>
        </tbody>
    </table>
</div>

.container {
    column-count: 3;
}

Note: This workaround is not ideal, as it can introduce additional markup and styling complexities.

Update:
Recent updates to Firefox 20 have introduced support for page-break-inside: avoid, but this does not yet fully resolve the issue of preventing column breaks within lists. Continued monitoring of web browser development is recommended.

The above is the detailed content of How to Prevent Content from Breaking Across CSS Columns?. For more information, please follow other related articles on the PHP Chinese website!