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 相关文章推荐
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
js闭包用法实例详解
Dec 13 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
Nov 06 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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图片上传代码
2013/11/04 PHP
javascript,jquery闭包概念分析
2010/06/19 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python+django实现文件下载
2016/01/17 Python
Python出现segfault错误解决方法
2016/04/16 Python
python 内置函数filter
2017/06/01 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
解决python 找不到module的问题
2020/02/12 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
毕业生自我推荐
2013/11/04 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
歌剧魅影观后感
2015/06/05 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL