Javascript 获取chromium/Puppeter中按列计数拆分的div的边界框

当我有如下列布局时，chrome只为两列生成一个边界框，边界框是两列不在列中时的高度。我想分别获得两列的边界框

采取如下布局：

.container{
列数：2；
}

你好
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本正文

您可以使用，它与元素不同，它可以直接获取渲染文本的BBox

基本思想是从元素的文本内容中选择每个字符，然后检查其BBox以手动组成列的BBox

检查新列出现时的第一个想法是验证当前角色的顶部位置是否低于前一列，但是如果是单行元素（至少Firefox和Safari会产生单行元素），这将失败。
为了避免这种情况，最好检查前一个字符的右侧和下一个字符的左侧之间的距离。它有时超过1，所以这个解决方案也不是完美的，因为它需要使用一些经验值，但根据我能做的几个测试，它仍然是最有效的

函数getRenderedColumns（节点）{
//我们只处理文本节点
如果（！node | |！node.parentNode | | node.nodeType！==3）{
返回[]；
}
//我们的范围对象形式，我们将得到字符的位置
常量范围=document.createRange（）；
//在这里，我们将存储所有列
常量列=[]；
//从第一个字符开始
range.setStart（节点，0）；
设str=node.textContent；
设{top，right，bottom，left}=range.getBoundingClientRect（）；
让lastRight=right；
让current=1；//我们已经有了第一个字符的rect
//迭代所有字符
而(目前为10,；
lastRight=rect.right；
如果（新列）{
列。按（{
顶部
左边
宽度：右-左，
高度：底部-顶部
} );
top=rect.top；
右=rect.right；
bottom=rect.bottom；
left=rect.left；
}
else{//扩展列的rect
bottom=Math.max（bottom，rect.bottom）；
右=数学最大值（右，右）；
}
电流++；
}
//推到最后一列
列。按（{
顶部
左边
宽度：右-左，
高度：底部-顶部
} );
返回列；
}
功能测试（选择器、颜色）{
const target=document.querySelector（选择器）；
//注意，我们使用TextNode作为输入
const rects=getRenderColumns（target.childNodes[0]）；
控制台日志（选择器）；
console.log（rects）；
//为这些矩形做一个可见的标记
forEach（rect=>{
const marker=document.createElement（'div'）；
marker.classList.add（'positionmarker'）；
const style=marker.style；
Object.entries（rect.forEach）（[key，val]）=>
样式[键]=val+'px'
);
style.borderColor=颜色；
document.body.append（标记）；
} );
}
测试（'.col-2>span'，'red'）；
测试（'单线'，'绿色'）；
测试（'.col-6>span'，'blue'）；

.col-2{
列数：2；
}
.col-6{
列数：6；
}
.单线{
宽度：250px；
}
.位置标记{
边框：1px实心；
位置：绝对位置；
指针事件：无；
}
div[class^=col-]{
边缘底部：12px；
}
正文{页边距底部：102px；}
body>.as控制台包装{最大高度：90px；}

你好
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
Firefox和Safari的单线测试
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

从我所看到的情况来看，我不确定这是否可行。您具体想在这里实现什么？可能还有其他方法来实现您的目标。哇！太神奇了，我不知道浏览器中甚至有一个范围api。谢谢！