如何防止元素内的列中断? [英] How to prevent column break within an element?

问题描述

考虑以下 HTML:

<ul><li>第一名</li><li>第二个</li><li>第三个</li><li>数字四有点长</li><li>第五个</li>

和以下 CSS:

.x {-moz 列数:3；列数:3；宽度:30em；}

就目前而言，Firefox 目前的呈现方式类似于以下内容:

• 第 1 个 • 长 3 位的数字• 第二个 • 第四个是一个 • 第五个

请注意，第四项在第二列和第三列之间拆分.我该如何预防?

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

• 第一个 • 第四个是• 第二位更长• 第三名 • 第五名

或

• 第一• 第三• 第五• 第二个 • 第四个是长一点

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

解决方案

正确的方法是使用 break-inside CSS 属性:

.x li {闯入:避免列；}

遗憾的是，截至 2021 年 10 月，Firefox 仍不支持此功能，但 其他主流浏览器都支持.使用 Chrome，我可以使用上面的代码，但我无法为 Firefox 做任何事情(参见错误 549114).

如有必要，您可以为 Firefox 执行的解决方法是将您的非破坏性内容包装在表格中，但如果您可以避免它，那将是一个非常非常糟糕的解决方案.

更新

根据上面提到的错误报告，Firefox 20+ 支持 page-break-inside: avoid 作为一种避免元素内分栏的机制，但下面的代码片段表明它仍然不适用于列表:

.x {列数:3；宽度:30em；}.x ul {边距:0；}.x li {-webkit-column-break-inside:避免；-moz-column-break-inside:避免；-moz-page-break-inside:避免；page-break-inside:避免；闯入:避免列；}

<ul><li>第一，一，一，一，一</li><li>二、二、二、二、二、二、二、二、二、二、二、二</li><li>第三个</li>

正如其他人提到的，您可以执行 overflow: hidden 或 display: inline-block 但这会删除原始问题中显示的项目符号.您的解决方案会因您的目标而异.

UPDATE 2 由于 Firefox 确实可以防止破坏 display:table 和 display:inline-block，因此可靠但非语义的解决方案是将每个列表项包装在它自己的列表中并在那里应用样式规则:

.x {-moz 列数:3；-webkit 列数:3；列数:3；宽度:30em；}.x ul {边距:0；page-break-inside:避免；/* 理论上 FF 20+ */闯入:避免列；/* Chrome、Safari、IE 11 */显示:表；/* 实际上 FF 20+ */}

<ul><li>第一，一，一，一，一</li><ul><li>二、二、二、二、二、二、二、二、二、二、二、二</li><ul><li>第三个</li>

Consider the following 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>

and the following CSS:

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

As it stands, Firefox currently renders this similarly to the following:

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

Notice that the fourth item was split between the second and third column. How do I prevent that?

The desired rendering might look something more like:

• 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

Edit: The width is only specified to demonstrate the unwanted rendering. In the real case, of course there is no fixed width.

解决方案

The correct way to do this is with the break-inside CSS property:

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

Unfortunately, as of October 2021, this is still not supported in Firefox but it is supported by every other major browser. With Chrome, I was able to use the above code, but I couldn't make anything work for Firefox (See Bug 549114).

The workaround you can do for Firefox if necessary is to wrap your non-breaking content in a table but that is a really, really terrible solution if you can avoid it.

UPDATE

According to the bug report mentioned above, Firefox 20+ supports page-break-inside: avoid as a mechanism for avoiding column breaks inside an element but the below code snippet demonstrates it still not working with lists:

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

As others mention, you can do overflow: hidden or display: inline-block but this removes the bullets shown in the original question. Your solution will vary based on what your goals are.

UPDATE 2 Since Firefox does prevent breaking on display:table and display:inline-block a reliable but non-semantic solution would be to wrap each list item in its own list and apply the style rule there:

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

.x ul {
    margin: 0;
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* Chrome, Safari, IE 11 */
    display:table;                      /* Actually FF 20+ */
}

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
    </ul>
    <ul>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
    </ul>
    <ul>
        <li>Number three</li>
    </ul>
</div>

这篇关于如何防止元素内的列中断?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！