问答

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

作者:admin 2021-04-22 我要评论

情景:原文本过长,利用CSS省略了,现在想要知道省略后的文本(即页面实现显示的文本)的长度,应该如何获取呢? PS:我尝试从节点数据里找,但是节点里数据还是...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

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

###
/** ! 
 * 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属性

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 求助!Mysql workbench connections出

    求助!Mysql workbench connections出

  • c++ 的dll 转golang可以调用

    c++ 的dll 转golang可以调用

  • c++的 new int{10}  和 new int(10) 有

    c++的 new int{10} 和 new int(10) 有

  • Grafana MySQL为数据源时, 折线图无法

    Grafana MySQL为数据源时, 折线图无法

腾讯云代理商
海外云服务器