文本区域 getClientRects

介绍

语法

const span = document.querySelector('span');
console.log(span.getClientRects());
/*
* {
* 0: {
* bottom: 83,
* height: 22,
* left: 14.5,
* right: 126.5,
* top: 61,
* width: 112,
* x: 14.5,
* y: 61
* },
* ...
* length: 3
* }
*/
复制代码

DOM 对象中就有 getClientRects 方法，返回值为 DOMRectList 对象，类数组结构（不是数组）。

场景

1. 获取文本的行数：DOMRectList 对象的 length 反应内容的行数。
2. 检测文本是否溢出：将最后一行文本的边界 getClientRects()[getClientRects().length - 1] 与作为块级元素的父级边界比较，可以获取重叠关系。
3. 溢出省略：结合前两点可以实现 js 控制溢出省略（由于无法将省略块融入内容，在末行留白较少时比较突兀）。

溢出省略	负边距 CSS 方案	getClientRects JS 方案
省略块布局	固定于右下边缘	对齐于可视末行右边缘
遮挡半个字	存在	不存在
省略块影响内容	不能	不能
性能代价	低	较高，监听内容变更和 resize

兼容性

在大多数浏览器场景可放心使用。

作者：蓝色夜晚
链接：juejin.cn/post/695911… 来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。