JavaScript 如何计算文本的行数

在前端经常会遇到内容太多了，需要对多余的内容进行截取并打上省略号的问题。CSS2 可以解决超出一行省略的问题，Chrome 可以通过-webkit-line-clamp来实现多行省略的问题，还是还需要配合其它的一些样式属性。解决这个问题的主要问题在于如何计算当前 DOM 内部的文本的行数。

方案

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

• 克隆文本所在的 DOM；

• 清除 DOM 的高度限制；

• 获取 DOM 的行高和高度；

• 计算行数；

• 去除克隆的 DOM。

清除文本在 DOM 内部高度的限制

拷贝文本所在的 DOM，将 DOM 的width、padding-right、padding-left、margin-right、margin-left保持和原有 DOM 一致；清除文本的height、padding-top、padding-bottom、margin-top、margin-bottom样式，这样一来文本就处于一个没有高度限制的 DOM 中，而且高度不受padding和margin的影响，并且它的宽度和原有宽度保持一致。

注意：代码基于 zepto.js

var getRow = function(id) {    var clone = $(id).clone().appendTo('body');    // clear some style
    clone.css({        "height":"auto",        "padding-top": 0,        "padding-bottom": 0,        "margin-top": 0,        "margin-bottom": 0
    });    
    // todo...};

获取行高

获取行高比较容易，直接通过window.getComputedStyle(element, null)可以获取元素所有的最终所使用的样式。

var getRow = function(id) {    var clone = $(id).clone().appendTo('body');    // clear some style
    // ...
    
    // get line-height
    var style = window.getComputedStyle(clone[0], null);    var fontSize = style.fontSize;    var lineHeight = style.lineHeight === "normal" ? fontSize : style.lineHeight;    
    // todo...};

计算行数

计算行数前必须要知道总高度，总高度获取的方式太多了，可以和获取行高一样通过window.getComputedStyle(element, null)，也可以通过document.clientHeight获取，当然像 jQuery 等框架已经把获取文档对象的高度封装好了。

注意：在计算之前需要把px转成数字类型

var pxToNumber = function(px) {   var num = Number(px.replace("px", ""));   return num;
};var getRow = function(id) {    var clone = $(id).clone().appendTo('body');    // clear some style
    // ...
    
    // get line-height
    // ...

    //get row count
    var height = style.height;    var row = pxToNumber(height) / pxToNumber(lineHeight);    
    clone.remove();    
    return row;
};

最后

当然我们在计算高度的时候，这个克隆出来的 DOM 不能让用户看到，可以通过opacity: 0.0001或者visibility: hidden来隐藏它。

var pxToNumber = function(px) {   var num = Number(px.replace("px", ""));   return num;
};var getRow = function(id) {    var clone = $(id).clone().appendTo('body');    // clear some style
    clone.css({        "height":"auto",        "padding-top": 0,        "padding-bottom": 0,        "margin-top": 0,        "margin-bottom": 0,        "visibility": "hidden"
    });    
    // get line-height
    var style = window.getComputedStyle(clone[0], null);    var fontSize = style.fontSize;    var lineHeight = style.lineHeight === "normal" ? fontSize : style.lineHeight;    //get row count
    var height = style.height;    var row = pxToNumber(height) / pxToNumber(lineHeight);    
    clone.remove();    
    return row;
};