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!