时间:2021-05-28
需求:根据行数决定是否限制展开和收起。
思路:用2个块统计行高,一个不加高度限制用来统计行数(css隐藏),一个加高度限制用来显示(加高度限制会导致统计行数不准)
要想知道文本的行数,那就需要知道文本的总高度和每一行的高度,总高度除以行高就是行数。当然总高度的计算必须是文字所在的 DOM 没有对高度的限制,随着文本的增加 DOM 要随之变高才行;最后还要考虑 DOM 的样式padding和margin对高度的影响。这样一来我们就可以计算出文本的行数了。总结一下我们需要如下几步:
相关代码
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 计算文本行数内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了javascript实现输出指定行数正方形图案的方法。分享给大家供大家参考。具体如下:javascript实现输出指定行数的正方形图案:点击生成图
本文实例讲述了python计算文本文件行数的方法。分享给大家供大家参考。具体实现方法如下:filename="somefile.txt"myfile=open(
Javascript实现计算器:系列文章:JS实现计算器详解及实例代码(一)Javascript实现计算器时间功能详解及实例(二)小型JavaScript计算器
Javascript计算器:系列文章:JS实现计算器详解及实例代码(一)Javascript实现计算器时间功能详解及实例(二)Javascript计算器->添加
本文实例讲述了JavaScript实现将文本框的值插入指定位置的方法。分享给大家供大家参考。具体如下:这里实现JavaScript将文本框的值插入当前面指定位置