JavaScript 如何计算文本的行数的实现
2020-09-16 04:08
3795 查看
需求:根据行数决定是否限制展开和收起。
思路:用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实现浮动广告
- 实现文本自动分类的基础----Term频率计算方法
- 如何实现linux和window之间的文本相互复制(即共享粘贴板)
- javascript 如何实现标签式按纽
- 用javascript实现计算两个日期的间隔天数
- 浅谈javascript的面向对象(一)如何实现类
- Flex中如何利用getTextField事件和numLines属性,计算出TextArea控件中内容的行数的例子
- 如何将服务器端计算出的数组传递到客户端的JavaScript?
- [翻译] 如何在 JavaScript 中实现拖放(上)
- 如何实现:GridView 控件中显示的文本不自动换行,隐藏超出宽度部分wj-wangjun
- JAVAScript如何实现图片等比缩放
- ajax中如何实现innerHTML中javascript的运行
- 【翻译】如何在 JavaScript 中实现拖放(下)
- javascript 基于原型的知识--如何实现继承
- 如何实现JavaScript
- 如何实现javascript的sleep功能
- 如何实现XML+XSL+javascript数据排序
- 如何实现服务器端下页面动态添加JavaScript脚本
- 如何实现单击UltraTextEditor的时候全选文本?
- javascript实现的一个自定义长度的文本自动换行的函数。