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 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 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学习教程之第2天
2008/06/15 PHP
学习php笔记 字符串处理
2010/10/19 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
将json对象转换为字符串的方法
2014/02/20 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python单例模式的两种实现方法
2017/08/14 Python
快速查询Python文档方法分享
2017/12/27 Python
用Python解决x的n次方问题
2019/02/08 Python
python3实现字符串操作的实例代码
2019/04/16 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
Python安装whl文件过程图解
2020/02/18 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
详解pandas赋值失败问题解决
2020/11/29 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
24个canvas基础知识小结
2014/12/17 HTML / CSS
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
护理专业自我鉴定
2014/01/30 职场文书
幼儿教育感言
2014/02/05 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
使用Python开发冰球小游戏
2022/04/30 Python