情景:原文本过长,利用CSS省略了,现在想要知道省略后的文本(即页面实现显示的文本)的长度,应该如何获取呢?
PS:我尝试从节点数据里找,但是节点里数据还是原文本
/** !
* 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属性