使用原生 JavaScript 获取文本的行数

撰写于 2016年6月25日 修改于 2016年7月23日 分类 前端代码与禅 标签 JavaScript / 前端

实际开发中会有这样的需求:只显示两行,如果超过两行,则显示一个“显示更多”的按钮,点击按钮来显示剩余行的内容。有个 jQuery 的插件 loadingDots 专门实现了这个功能。不过这里我们来看看如何利用原生的 JavaScript 来实现。要实现这个需求,最关键的是要确定这个容器内文本的行数,得到行数后,修改元素高度,并确定是否显示加载按钮。

window.getComputedStyle()

要使用原生 JavaScript 代码获取一个元素的各个 style 属性,使用 window.getComputedStyle() 是必然的。它可以返回一个 HTML 元素在浏览器中真正显示时的各个样式——当然,有些样式会被浏览器给屏蔽,比如,你要获取一个链接的颜色,并准备通过颜色来判断用户是否访问过某个地址,那肯定是不行的。

该方法返回的,是一个样式键值对,是 CSSStyleDeclaration 的实例。各属性索引名没有 - ,且采用驼峰命名法。比如 lineHeight

行数 = 整体高度 / 行高

整体高度通过 height 可以获取。行高可以通过 lineHeight 获取,将其结果再取整即可得到行数。

但有个问题,如果没有针对一个元素设置 line-height 值,则其默认值为 normal ,这个值在桌面浏览器中通常是 1.2 ,但还与字体有关。因此,最好是对需要计算行数的元素设置一下 line-height 值。

一个简单的实现如下:

1
2
3
4
5
6
7
8
function countLines(ele) {
var styles = window.getComputedStyle(ele, null);
var lh = parseInt(styles.lineHeight, 10);
var h = parseInt(styles.height, 10);
var lc = Math.round(h / lh);
console.log('line count:', lc, 'line-height:', lh, 'height:', h);
return lc;
}

Demo

请参见 Demo

Site by Yifei Zhang using Hexo & Random

Yifei Zhang的博主是一名Node.js程序员,博客的内容会涉及电影 / 生活 / 吐槽 / JavaScript / PHP / Node.js / Express / MongoDB / MySQL / Redis / AngularJS / jQuery / HTML。

Hide