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

Brad
  • 25

image.png
image.png
情景:原文本过长,利用CSS省略了,现在想要知道省略后的文本(即页面实现显示的文本)的长度,应该如何获取呢?

PS:我尝试从节点数据里找,但是节点里数据还是原文本
image.png

回复
阅读 1.1k
2 个回答
/** ! 
 * linelip.js V1.0.0 | MIT License | https://github.com/JasonSubMara/linelip
 * Copyright 2019, JasonSubMara <jie.yr127@gmail.com>
 * @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...
希望对你有帮助~感谢点赞~

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏