我正在尝试获取 div 中文本的总行数，有人建议我可以将 div 的显示属性设置为内联，并且返回的 clientRects 数等于文本行。但是，我需要在 div 上使用绝对定位，当我这样做时它不起作用。
这是一个问题示例:http://jsfiddle.net/cu5kb/
var x = document.createElement("div");
x.style.display = "inline";
x.style.whiteSpace = "pre-line";
x.style.position = "absolute";
var y = document.createTextNode("Text \n text");
x.appendChild(y);
我得到 1 个而不是 2 个矩形:
x.getClientRects().length === 1
有什么办法可以解决这个问题吗？
最佳答案
更新
有3 positioning schemes在 CSS 2.1 中
- 正常流程。在 CSS 2.1 中，正常流程包括 block 级框的 block 格式化、行内级框的行内格式化以及 block 级和行内级框的相对定位。
- float 。在 float 模型中，首先按照正常流程布局一个盒子，然后从流程中取出并尽可能向左或向右移动。内容可能会沿着 float 的一侧流动。
- 绝对定位。在绝对定位模型中，一个框从正常流中完全移除(它对后面的兄弟没有影响)并分配一个相对于包含 block 的位置。
Docs says ，getClientRects 仅适用于内联元素，并且仅适用于正常流。其他方案使它阻止或至少这样对待它，并且 docs says
But for a block element, [browser] will return only a single rectangle.
关于javascript - 为什么绝对定位会影响getClientRects()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21896183/