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这样的库中，它们有一个中断标记的概念，它指示元素中发生中断的位置（如果确实存在中断）。我想这是胡迪尼最终可能实现的那种事情。我很想看看是否有办法使用传统方法询问一个元素以查看它是否换行到下一页/列。

用例

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

更新

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

标签： javascriptcss

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 打印此页面。它们之间有几行区别，我没有设置任何东西，只是使用了默认设置

铬合金：

火狐：

IE：