欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-22 14:58:16
需求:根据行数决定是否限制展开和收起。思路:用2个块统计行高,一个不加高度限制用来统计行数(css隐藏),一个加高度限制用来显示(加高度限制会导致统计行数不准)要想知道文本的行数,那就需要知道文本的总...

需求:根据行数决定是否限制展开和收起。

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

思路:用2个块统计行高,一个不加高度限制用来统计行数(css隐藏),一个加高度限制用来显示(加高度限制会导致统计行数不准)

要想知道文本的行数,那就需要知道文本的总高度和每一行的高度,总高度除以行高就是行数。当然总高度的计算必须是文字所在的 dom 没有对高度的限制,随着文本的增加 dom 要随之变高才行;最后还要考虑 dom 的样式padding和margin对高度的影响。这样一来我们就可以计算出文本的行数了。总结一下我们需要如下几步:

  • 克隆文本所在的 dom;
  • 清除 dom 的高度限制;
  • 获取 dom 的行高和高度;
  • 计算行数;
  • 去除克隆的 dom。

相关代码

到此这篇关于javascript 如何计算文本的行数的实现的文章就介绍到这了,更多相关javascript 计算文本行数内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!