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 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
解决echarts数据二次渲染不成功的问题
Jul 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
PHP调用三种数据库的方法(2)
2006/10/09 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
js window.print实现打印特定控件或内容
2013/09/16 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
详解Python当中的字符串和编码
2015/04/25 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
Python数据存储之 h5py详解
2019/12/26 Python
python导入库的具体方法
2020/06/18 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
医院办公室主任岗位职责
2015/04/01 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang