【单行文本省略后】的【实际显示文本】长度，如何获取？

Question

情景：原文本过长，利用CSS省略了，现在想要知道省略后的文本（即页面实现显示的文本）的长度，应该如何获取呢？

PS:我尝试从节点数据里找，但是节点里数据还是原文本

Answer 1

/** ! 
 * linelip.js V1.0.0 | MIT License | https://github.com/JasonSubMara/linelip
 * Copyright 2019, JasonSubMara <[e-mail]>
 * @description Multiline text overflow ellipsis
 * @param {Object} line.
 * @param {Object} element.
 */
function linelip(lineNum, tagele) {
    var eles = document.getElementsByClassName(tagele);
    var lineNum = lineNum || 2;    
    for (var i = 0; i<eles.length; i++) {
        var element = eles[i]
        /* 获取原文本 */
        var text = element.textContent;
        var textarr = text.split("");
        /* 临时存放数值 */
        var num1 = 0;
        for (var j = 0; j < textarr.length; j ++){
            var regzn = new RegExp("[\\u4E00-\\u9FFF]+$","g");
            if(!regzn.test(textarr[j])) {
                /* 非中文字符*/
              num1 = num1 + 1;
            }else {
                num1 = num1 + 2;
            }
        }
        /* 获取原文本内容长度 */
        var totalTextLen = num1;
        
        /* 获取文本容器宽度 */
        var baseWidth = window.getComputedStyle(element).width; 
        /* 获取文本字体大小 */
        var baseFontSize = window.getComputedStyle(element).fontSize;
        /* 获取单行文本宽度 >> 即文本容器宽度css属性值转换成数字 */
        var lineWidth = +baseWidth.slice(0,-2);
        /* 获取单行文本内容个数 */
        var strNum = Math.floor(lineWidth/ +baseFontSize.slice(0,-2));
        /* 定义最终输出内容 */
        var content = "";
        /* 定义最终文本容器可容纳文本长度--->统一转成英文字符计算 */
        var totalStrNum = (Math.floor(strNum * lineNum))*2;
        var lastIndex = totalTextLen - totalStrNum;
        /* 定义最终文本截取位置 */
        var lastplace = 11 - lastIndex;
        if (totalTextLen > totalStrNum) {
            content = text.slice(0, lastplace).concat("...");
        }else {
            content = text;
        }
        element.innerHTML = content;
    }

}

这是我之前写的多行文本溢出隐藏省略显示的js，可以作为参考理解下我的思路~，
代码地址：https://github.com/JasonSubMa...
希望对你有帮助~感谢点赞~

Answer 2

给包裹文本的标签加一个属性，如：data-text="文本", 然后用js来获取这个元素对应得data-text属性