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 OOP类与继承
Nov 15 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
在nuxt中使用路由重定向的实例
Nov 06 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
PHP 查找字符串常用函数介绍
2012/06/07 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
Python编程中的文件操作攻略
2015/10/16 Python
python版本的读写锁操作方法
2016/04/25 Python
itchat接口使用示例
2017/10/23 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
求职自荐书范文
2013/12/04 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
数学教学随笔感言
2014/02/17 职场文书
党校毕业心得体会
2014/09/13 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
2014年服务员工作总结
2014/11/18 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
学生会主席任命书
2015/09/21 职场文书
五年级语文教学反思
2016/03/03 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
导游词之襄阳古城
2019/09/27 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang