7

这是我之前的问题的后续问题。我正在尝试找到一种方法来查找元素中每一行文本的确切位置。

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

一个例子：

我有一个<p>没有填充、边框或边距的 2010 像素高（scrollHeight, offsetHeight，并且clientHeight所有报告都相同），并且在浏览器中有 89 行。是22 lineHeight。computedStyle()

2010 / 22 = 91.37 行

对于小元素，我可以将值设置为底值以获得正确的行数，但是在较大元素的情况下遇到上述问题，我无法准确地获得确切的行数。

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

谢谢！！

更新：

所以我有 26 个上标<p>，每个上标突出 2px，将lineHeight它们出现的那些行的 24px 延伸到 24px，这占了我缺少的空间。（Woot！到目前为止谢谢！）

我想我现在所处的船是我需要找到一种方法来动态计算它们在正常基线上方突出多少，或者发现 a 的基线<sup>比正常基线高多少。（反之亦然<sub>。）否则，我可以用 CSS 确定吗？

4

2 回答 2

2

提供我自己的答案，因为@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

于 2012-09-26T18:58:26.200 回答
1

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

于 2012-09-26T18:35:22.013 回答