“break-before：avoid-column”在 Firefox 中不起作用

Question

我是一名业余编码员，在个人网站上工作，边学习边学习。作为一种索引页，我创建了一个按字母顺序排列的列表，分为多个列，每个字母都有小节。我想避免将这些小节跨列分开；例如，通过向前或向后推动分栏符，将“B”子标题和所有以“B”开头的条目保留在同一列中。

似乎将 CSS 属性

break-before: avoid-column;

应用于

<li>

元素就可以解决问题，并且在 Edge 和 Chrome 中它按照我希望的方式工作。然而，我主要使用 Firefox，这似乎没有效果。我的 Firefox 是最新的（v 121.0.1），我在网上找到的所有内容都说这个版本应该支持这个属性，所以我有点困惑。对可能发生的情况以及如何解决它有任何见解吗？

CSS

.index-list {
  column-width: 150px;
}

.index-list li {
  break-before: avoid-column;
}

HTML

<ul class="index-list" ">
  <h2>A</h2>
  <li>Anteater</li>
  <li>Apple</li>
  <li>Asteroid</li>
  <h2>B</h2>
  <li>Bouncy Ball</li>
  <li>Bumblebee</li>
  <li>and so on...</li>
</ul>

Answer 1

单击 MDN 上的此处！然后单击右侧名为：

的选项卡

浏览器兼容性

Firefox似乎支持

break-before

属性，但目前还不支持

avoid-column

，用红色“×”标记。