JavaScript获取准确的行高

这篇讲的是如何通过 JavaScript 获取准确的行高，来实现多行文本的精确截断——比如在很多文字的 div 里只显示前 5 行，隐藏超出的部分。 作者从实际开发需求出发，指出直接获取 `lineHeight` 属性可能遇到的坑：CSS 中设置的行高可能是相对值（如 1.5），而浏览器渲染时计算后的像素值才是实际行高。文中对比了几种获取行高的方式，比如通过 `getComputedStyle` 读取计算后的值、利用隐藏元素做测量，或是通过 `offsetHeight` 反推。作者强调了直接取 `lineHeight` 字符串值的风险，它可能返回 “normal” 或一个没有单位的数字，无法直接用于计算。 核心方案是先获取元素的 `fontSize`，再结合 `lineHeight` 的计算值，得出每一行真实的像素高度。作者通过代码示例演示了如何动态测量文本总高度，并与 “5 行 × 行高” 进行比较，从而判断是否需要截断。这种方法兼容性较好，能够适应不同字体和浏览器渲染差异。 文章最终提供了一个可靠的行高获取函数，帮助开发者在动态布局中准确控制多行文本的显示，尤其适用于需要根据内容自适应截断的卡片、列表等 UI 组件。