如何防止元素内的列中断？

【问题标题】：How to prevent column break within an element?如何防止元素内的列中断？
【发布时间】：2021-10-14 05:00:27
【问题描述】：

考虑以下 HTML：

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

以及以下 CSS：

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

目前，Firefox 将其呈现为类似于以下内容：

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

请注意，第四项拆分为第二列和第三列。我该如何预防？

所需的渲染可能看起来更像：

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

或

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

编辑：宽度仅用于演示不需要的渲染。在实际情况下，当然没有固定的宽度。

【问题讨论】：

• 你试过给那个 li 一个独立的风格吗？比如
• 第四个有点长
???px = 需要的宽度来适应第四个。