如何防止列表项在多列布局中跨列破坏？

防止元素内的列中断

在多列布局中，您可能会遇到单个列表项跨列中断的情况。为了防止这种不需要的行为，可以使用break-inside CSS属性。

使用break-inside

具体来说，为列表项元素设置break-inside：avoid-column将确保它们在单个列中保持完整：

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

Firefox 兼容性问题

不幸的是，截至 2021 年 10 月，Firefox 不支持闯入属性。虽然您可以在其他主要浏览器中使用它，但您需要 Firefox 的解决方法。

Firefox 的解决方法

对于 Firefox 来说，一个不太理想的解决方案是将不间断的内容包装在表格中：

<div class="x">
    <table>
        <tr><td>Number one</td></tr>
        <tr><td>Number two (longer)</td></tr>
        <tr><td>Number three</td></tr>
    </table>
</div>

Firefox 20 支持（部分）

Firefox 20 引入了对page-break-inside：避免，但它并不能完全解决列表的问题。以下代码表明它仍然会破坏项目：

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

以上是如何防止列表项在多列布局中跨列破坏？的详细内容。更多信息请关注PHP中文网其他相关文章！