javascript – 如何在HTML中的行之间找到空格？

这是对previous question of mine的后续问题.我试图找到一种方法来查找元素中每行文本的确切位置.

我能够找到css lineHeight属性(参见上一个答案).问题是我的元素的高度略大于行数乘以lineHeight的累积高度.

一个例子：

我有一个< p>即没有填充,边框或边距的2010px高,(scrollHeight,offsetHeight和clientHeight都报告相同,)并且在浏览器中有89行. computedStyle()的lineHeight是22.

2010/22 = 91.37行

对于小元素,我可以对值进行平移以获得正确的行数,但是遇到上面的问题时,更大的元素我无法准确地获得确切的行数.

我的假设是,我没有考虑到这些文本行之间有一些小的空间.知道如何找到它吗？它与字体类型有关吗？它是由浏览器自动设置的吗？任何文档都会特别有用.

谢谢！！

更新：

所以我在我的< p>中有26个上标,每个上升2px,将它们看起来为24px的那些线的lineHeight扩展,这是我遗漏的空间. (Woot！到目前为止！)

我想我现在所处的船是我需要找到一种方法来动态计算它们在线的正常顶部上方突出多少,或者发现一个< sup>的基线高出多少.高于正常基线. (反之亦然< sub&gt ;.)
否则,我可以用CSS确定吗？

最佳答案

上标和下标通常突出于线边界的上方和下方,如this demo所示 – 您会看到左边的示例在线之间的空间比右边的更明显,即使它们具有相同的线高.不幸的是,浏览器“排版”(如果你可以称之为)不允许你确定子/超级脚本突出多少,所以你不能在计算实际行高时考虑到这一点.

原文地址：https://www.jb51.cc/css/427559.html