当前位置:首页 >  站长 >  编程技术 >  正文

JavaScript 如何计算文本的行数的实现

 2020-10-28 14:12  来源: 脚本之家   我来投稿 撤稿纠错

  【推荐】海外独服/站群服务器/高防

这篇文章主要介绍了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 计算文本行数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

来源:脚本之家

链接:https://www.jb51.net/article/195571.htm

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关标签
javascript
java

相关文章

  • 参加Java培训班有用吗?这个问题大家要怎么看待

    在众多的编程培训中,Java软件开发作为老牌儿的编程主流,从发展前景上看,无论是现在还是将来,依然会持续火爆的状态。对于当下年轻人想要快速的掌握这项技术,进入到这个行业,最为热议的话题是“参加Java培训班有用吗”。小编可以肯定的回答,是有用的,学习的根据来自于兴趣,如果大家是真的热爱这行,在加上专

    标签:
    java
  • 动力节点南京Java培训口碑教学,满分教学就业体验

    江南佳地,邂逅金陵,动力节点南京Java培训校区,为长三角地带的发展注入专业Java教培力量,动力节点自09年成立至今,专注Java培训教学,一直秉承着“为学员服务”的唯一教育理念,坚持口碑教学,被业界称为“口口相传的Java培训黄埔军校”。

    标签:
    java
    java培训
  • 动力节点广州Java培训,为大家撑起一个IT的未来

    广州动力节点Java培训机构,一直以来专注Java的教学,深耕教育,稳扎稳打,在行业具有“口口相传的黄埔军校”之称,有句话说的好“没有量变的积累,哪来质变的飞跃”动力节点和你一起,扎扎实实做教育,你们扎扎实实学本领,时刻准备着,有朝一日,风自会来。

    标签:
    java
    在线培训
  • 动力节点成都Java培训招生源于口碑,业界巨头

    为了能够搭乘互联网的快车,实现人生的逆转,不少年轻人选择动力节点成都Java培训,动力节点作为Java职业培训,没有理由不去担起这份沉甸甸的信任,所以,自09年创立起,一直专注于Java的教学,将全部的资源

    标签:
    java
    培训机构
  • 参加动力节点北京Java培训会让学者更加有信心

    通过Java培训出来的同学与没参加过培训的同学差距还是有不少的,同学一直以来对参加培训都保持着犹豫的心态,其实大家了解后会发现,不管是对零基础还是有编程认知的同学来讲,参与更加密集、系统化的培训

    标签:
    java
    培训机构

热门排行

信息推荐