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 计算文本行数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
可以使用 e.stopPropagation(); e.preventDefault();来阻止事件冒泡，和默认事件的执行。但不能阻止事件的追加，如要追加，请看下面的实现方法2014-10-10
下面小编就为大家带来一篇浅谈在fetch方法中添加header后遇到的预检请求问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了JavaScript中字符串分割函数split用法,实例分析了javascript中split函数操作字符串的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要给大家介绍了关于JS拆箱转换的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
这篇文章主要介绍了在HTML中使用JavaScript的两种方法，帮助大家更好的理解和制作网页，感兴趣的朋友可以了解下2020-12-12
这篇文章主要为大家详细介绍了小程序根据手机机型设置自定义底部导航距离，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
这篇文章主要介绍了JS运算符简单用法,结合实例形式详细分析了JavaScript各种逻辑运算符、数学运算符、关系运算符等相关操作技巧,需要的朋友可以参考下2020-01-01
Javascript中有3个事件句柄在对应键盘的输入状态:按键被按下（按下按键但还没有抬起）、点击按键（按下并抬起按键）、按键抬起（按键抬起之后）,接下来详细介绍，感兴趣的朋友可以了解下2013-01-01
这篇文章介绍了两日期相减,获得天数的小例子，有需要的朋友可以参考一下2013-07-07
JavaScript Serializer序列化时间处理示例
JavaScriptSerializer序列化时间后会把时间序列化成N进制的鬼数据 ，下面有个示例，需要的朋友可以了解下2014-07-07
最新评论