Home > Web Front-end > CSS Tutorial > How Can I Prevent Column Breaks Within a List Element in CSS?

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

Linda Hamilton
Release: 2025-01-05 21:24:44
Original
780 people have browsed it

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>
Copy after login
Copy after login

CSS:

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

The rendering in Firefox:

• Number one    • Number three          bit longer
• Number two    • Number four is a    • Number five
Copy after login

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
Copy after login

or

• Number one    • Number three        • Number five
• Number two    • Number four is a
                  bit longer
Copy after login

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

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

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;
}
Copy after login

HTML:

<div>
Copy after login
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template