Question

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

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

一个例子：

我的<p>是2010px高而没有填充，边框或边距，（scrollHeight，offsetHeight和clientHeight都报告相同，并且有浏览器中有89行。 lineHeight的{{1}}为22.

2010/22 = 91.37行

对于小元素，我可以对值进行平移以获得正确的行数，但是遇到上述问题时，我会无法准确获得确切的行数。

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

谢谢！

更新

所以我的computedStyle()中有26个上标，每个上标突出2px，将它们看起来为24px的<p>行扩展，这是我遗漏的空间。（哇！到目前为止，谢谢！）

我想我现在的船是我需要找到一种方法来动态计算它们在线的正常顶部上方突出多少，或者发现{{1}的基线高出多少}高于正常基线。（反之亦然lineHeight。）否则，我可以用CSS确定吗？

Answer 1

提供我自己的答案，因为@ lanzz在某种程度上是不完整的。

如果将块元素定义为：

div {
 font-size: 10px;
 line-height: 10px;
 height:30px;
 margin-top: 0px;
 margin-bottom: 0px;
 border: 0px;
 overflow-y: hidden;
 padding: 0px;
}

你将获得足够的空间用于完全3行。但是，如果您有子脚本或超级脚本，则可以看到较少的行。通过移除溢出，您可以强制它仅显示3行空格。

这可以在http://jsbin.com/ogoruy/4/

中证明

上标和下标是'内联块元素'：

内联框的高度包含所有字形及其每一半的前导，因此恰好是“行高”。

如果块容器框中的所有内联框只有一个'line-height'值，并且它们都是相同的字体（并且没有替换元素，内联块元素等），以上将确保连续线的基线与“线高”完全分开。

http://www.w3.org/TR/CSS2/visudet.html#line-height

Answer 2

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

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

2 个答案: