javascript - 我的段落中有分栏符吗？里面有几行？

Question

CSS 有一个孤儿和寡妇的概念，所以浏览器有办法知道有多少行穿过列(或者，如果打印，页面)边界。

有没有办法在 JavaScript 中知道这一点？

它可以使用元素的几何形状以一种非常不愉快和脆弱的方式完成，但这似乎是一个非常不受欢迎的结果。

例如:https://codepen.io/notionparallax/pen/BvLZeB

document.querySelectorAll("p, h1, h2, h3, h4, h5").forEach(
    (x) => {

      let boxW    = Math.round(x.getBoundingClientRect().width);
      let clientW = Math.round(x.clientWidth);
      if (boxW !== clientW) {
        console.log(x);
        x.classList.add("has-break");
      }

      try {
        if (x.nextElementSibling.offsetLeft !== x.offsetLeft) {
          console.log(x);
          x.classList.add("end-of-column");
        }
      } catch(error) {}

    }
)

在类似Paged.js 的图书馆中他们有一个 break token 的概念，它指示元素中发生 break 的位置(如果确实有 break)。我想这就是 Houdini 可能使之成为可能的事情最终。我很想看看是否有办法使用传统方法询问元素以查看它是否换行到下一页/列。

用例

我想知道元素在哪里中断，以便我可以查看是否应该返回 DOM 并在前面的 header 之前放置一个中断。这由元素本身的 widows 和 orphans 部分处理，但我希望能够有更精细的控制粒度，以便 - 例如 - 章节不会从页面底部开始。我可以在两个段落之间使用两行段落，但在标题之后的段落应该有更多的喘息空间。

更新

我对用例的解决方案不感兴趣，我对标题中问题的答案感兴趣。用例说明了我感兴趣的信息的一个可能应用，而不是问题的唯一原因。

Answer 1

您可以在标签中添加page-break-before: always;，这将在标签之前设置一个分页符。例如，将此 CSS 添加到 h1 将在每个 h1 标题之前创建一个新页面

h1 {
  page-break-before: always;
}

<div>
  <h1>Page 1</h1>
  <p>content here</p>
  <h1>Page 2</h1>
  <p>content here</p>
</div>

更新

听起来你想找到一种方法来识别，而不是设置打印分页符，但请注意页面大小可以变化，比例和打印边距可以改变，这显然会影响页面的内容和页面休息地点。您无法以通用方式找到分页符。

更新 2

每个浏览器都有自己的页面划分逻辑。例如，我尝试从 Chrome、Firefox 和 IE 打印此页面。它们之间有几行不同，我没有设置任何东西，只是使用默认设置

Chrome :

火狐:

即: