我的段落中是否有列分隔符？它有多少行？

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标记的概念,它指示在元素中断点发生的位置(如果确实存在中断).我想,这是Houdini最终可能做到的事情.我很想知道是否有使用传统方法询问元素以查看它是否包装到下一页/列的方法.

用例

我想知道元素在哪里中断,以便我可以看到我是否应该向前移动DOM,在前面的标题之前放置一个中断.这部分由寡妇和孤儿为元素本身处理,但我希望能够有更精细的控制,以便 - 例如 - 章节不会从页面底部开始.两段之间的段落中有两行,我会很好,但是标题后面的段落应该会有更多的喘息空间.

更新

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

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>

UPDATE

听起来你想找到一种方法来识别,而不是设置打印分页符,但请注意页面大小可能会有所不同,缩放比例和打印页边距都可以改变,这显然会影响页面的内容和分页位置.您无法以通用方式查找分页符.

更新2

每个浏览器都实现了自己如何划分页面的逻辑.例如,我尝试从Chrome,Firefox和IE打印此页面.它们之间有一些线差异,我没有设置任何东西,只是使用了默认设置

铬:

火狐:

IE: