动态计算当前容器内文字的行数

11 阅读1分钟

在做项目时,有时会遇到动态计算文字行数来做展开收起的需求。 最简单的方式就是用display:-webkit-box,但是这个会存在兼容性的问题。因此用Height是不错的解决方式。 例如: 页面有一个text容器

<div class="text">12345678</div>

我们可以在页面加载完成之后获取此元素的行数(不可提前设置高度):

let text = document.querySelectorAll('.text' )
let lineHeight = 20 // 行高
let containerHeight = text.clientHeight
let lines = Math.floor(containerHeight / lineHeight) //获取到的行数

由此就可以根据获取到的行数来进行后续的操作