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 相关文章推荐
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
虫族 ZERG 概述
2020/03/14 星际争霸
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
Python解决八皇后问题示例
2018/04/22 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
聊城大学毕业生自荐书
2014/02/01 职场文书
学习决心书范文
2014/03/11 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
学历公证委托书
2014/04/09 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
隐形的翅膀观后感
2015/06/10 职场文书