JavaScript 如何计算文本的行数的实现
更新时间：2020年09月14日 10:12:26 作者：KASON
这篇文章主要介绍了JavaScript 如何计算文本的行数的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
需求：根据行数决定是否限制展开和收起。
思路：用2个块统计行高，一个不加高度限制用来统计行数(css隐藏)，一个加高度限制用来显示(加高度限制会导致统计行数不准)
要想知道文本的行数，那就需要知道文本的总高度和每一行的高度，总高度除以行高就是行数。当然总高度的计算必须是文字所在的 DOM 没有对高度的限制，随着文本的增加 DOM 要随之变高才行；最后还要考虑 DOM 的样式padding和margin对高度的影响。这样一来我们就可以计算出文本的行数了。总结一下我们需要如下几步：
- 克隆文本所在的 DOM；
- 清除 DOM 的高度限制；
- 获取 DOM 的行高和高度；
- 计算行数；
- 去除克隆的 DOM。
相关代码
document.getElementById("noticeContent").innerText = str;//展示的块
document.getElementById("noticeContent2").innerText = str;//计算行高的块
this.$nextTick(() => {
let noticeDom = document.getElementById("noticeContent2");
console.log(noticeDom);
let style = window.getComputedStyle(noticeDom, null);
let row = Math.ceil(
Number(style.height.replace("px", "")) /
Number(style.lineHeight.replace("px", ""))
);//总行高 / 每行行高
console.log("noticeDom===>", style.height, style.lineHeight);
console.log("rowwwww", row);
if (row > 2) {//超过2行则显示展开和收起
this.showOmit = true;
this.showOpen = true;
} else {
this.showOpen = false;
}
});
到此这篇关于JavaScript 如何计算文本的行数的实现的文章就介绍到这了,更多相关JavaScript 计算文本行数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
JavaScript数组去重是前端面试酷爱的问题，问题简单而又能看出程序员对计算机程序执行过程的理解如何。数组去重的方法有很多，到底哪种是最理想的我不清楚。于是我测试了下数组去重的效率。测试二十万个数据，随着数据越多效率很明显的就体验了出来。下面来一起看看吧。2016-10-10
本篇文章主要给大家详细分析了js的作用域、预解析机制以及相关代码分析，对此感兴趣的朋友学习下吧。2018-02-02
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
这篇文章主要介绍了ES6常用小技巧,结合实例形式总结分析了ES6常见的数组去重、交换变量、合并数组、字符串反转、数组迭代、数值计算等相关操作技巧,需要的朋友可以参考下2019-12-12
本文给大家详细汇总了一下javascript中的数组方法，十分的全面细致，有需要的小伙伴可以参考下。2015-07-07
下面小编就为大家带来一篇关于JS变量和作用域详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要为大家分享了js滑动提示效果代码，实现方法简单，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了js防抖函数和节流函数使用场景和实现区别,结合实例形式详细分析了js防抖函数和节流函数基本功能、定义、用法区别及操作注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了JavaScript中的公有、私有、特权和静态成员用法,以实例形式分析了其使用方法,简单易懂,对于初学javascript的朋友具有不错的学习与借鉴价值,需要的朋友可以参考下2014-11-11
深入理解JavaScript系列（29）：设计模式之装饰者模式详解
这篇文章主要介绍了深入理解JavaScript系列（29）：设计模式之装饰者模式详解,装饰者用用于包装同接口的对象,不仅允许你向方法添加行为,而且还可以将方法设置成原始对象调用（例如装饰者的构造函数）,需要的朋友可以参考下2015-03-03
这篇文章用实例代码讲述了JavaScript如何获取页面图片原始尺寸的方法，现在分享给大家供大家参考学习，有需要的可以一起来看看。2016-09-09
最新评论