break-after 的解決方法：避免列？

Question

根據Mozilla的說法，實際上不支持break-after: avoid-column; 在任何瀏覽器中。 唯一支持 ( Link ) 的是break-inside: avoid-column; .

不幸的是，這不是我需要的。 我有一個帶有不同標題的多列布局。 我想防止標題以列結尾，而文本從下一列開始。 我有一張圖片來演示：

這個例子保存在這里： https ://jsfiddle.net/p5ks8zq9/

完美的解決方案是設置一個break-after: avoid-column; 到每個標題。 但是因為不支持，所以我需要一個解決方法。

我的第一個想法是使用break-inside: avoid-column; . 我可以在標題和以下<p>周圍使用div 。 但是，如果以下段落太長而無法容納，則會出現問題，如本示例所示： https ://jsfiddle.net/p5ks8zq9/2/

有誰知道如何通過解決方法解決這個問題？

Answer 1

我想我可以用 JavaScript 解決它：

document.addEventListener("DOMContentLoaded", function(event) {
    var headings = document.querySelectorAll("h1");
    headings.forEach(element => {
        var next = element.nextElementSibling;
        while (element.offsetLeft < next.offsetLeft) {
            element.parentNode.insertBefore(document.createElement("br"), element);
        }
    });
});

該腳本遍歷每個h1元素並將offsetLeft與下一個p元素進行比較。 如果它們沒有相同的 offsetLeft，腳本將根據需要插入盡可能多的<br> 。

不幸的是，如果文本很大，在 Safari 中這種方式非常慢。