JavaScript 如何计算文本的行数的实现


Posted in Javascript onSeptember 14, 2020

需求:根据行数决定是否限制展开和收起。

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 相关文章推荐
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
利用forever和pm2部署node.js项目过程
May 10 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
JavaScript实现串行请求的示例代码
Sep 14 #Javascript
浅谈JavaScript 声明提升
Sep 14 #Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 #Javascript
详解JavaScript 高阶函数
Sep 14 #Javascript
vue实现简单计算商品价格
Sep 14 #Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 #Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 #Javascript
You might like
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
php中实现简单的ACL 完结篇
2011/09/07 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
php实现可运算的验证码
2015/11/10 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
js实现秒表计时器
2019/12/16 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
详细解析Python中的变量的数据类型
2015/05/13 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
python绘制中国大陆人口热力图
2018/11/07 Python
奉献家乡演讲稿
2014/09/16 职场文书
机动车登记业务委托书
2014/10/08 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs