对于IE兼容的共同方法
多行文本通过css可设置完成,但是IE不兼容display: -webkit-box;属性而不可使用。本方法将字符串分截成多段后以最后一行使用单行省略号实现。
提示:以下是本篇文章正文内容,下面案例可供参考
一、字符串分段
创建一个虚拟节点,循环字符串并填入节点中,节点长度与外层div节点进行比较,超出则截取继续存入下一行。
// 建立一个虚拟节点
let measure = ce('span');
(function (s) {
s.position = 'absolute'; // 防止页面重排
s.whiteSpace = 'pre'; // 跨浏览器的宽度结果
s.visibility = 'hidden'; // 防止绘图
})(measure.style);
list[i].appendChild(measure);
// 第一行
let str1 = '';
// 第二行
let str2 = '';
// 第三行
let str3 = '';
// 多行flag
let lineFlag = false;
measure.offsetWidth = 0;
for (let j = 0; j < text.length; j++) {
// 虚拟节点填入字符
measure.appendChild(ctn(text[j]));
// 判断长度接近上限
if((width < measure.offsetWidth) || ((width - 7) < measure.offsetWidth)){
if(clampNum > 2 && !lineFlag){
lineFlag = true;
measure.innerHTML = '';
measure.appendChild(ctn(text[j]));
str2 += text[j];
}else if(clampNum > 2 && lineFlag){
// 第三行文字
str3 += text[j];
}else{
// 第二行文字
str2 += text[j];
}
}else{
if(lineFlag){
// 第二行文字
str2 += text[j];
}else{
// 第一行文字
str1 += text[j];
}
}
}
此方法只设置了最多三行折行,更多折行可设置list保存分段的字符串。
二、建立节点插入页面
再次建立节点填入分段字符并插入到页面的外层dom中。
// 创建节点
lineFinally = ce('span');
// 属性设置 最后一行的单行省略号设置,不是最后一行可不添加
(function (s) {
s.display = 'inline-block';
s.overflow = 'hidden';
s.textOverflow = 'ellipsis';
s.whiteSpace = 'nowrap';
s.width = list[i].offsetWidth + 'px';
})(lineFinally.style);
// 填入字符串
lineFinally.appendChild(ctn(str));
// 插入外层节点中
list[i].appendChild(lineFinally);
三、方法完整代码
方法中的冒号前后为其他标签再本项目中需要而添加,正常单纯的多行省略号可以不写。
className为方法穿的class类名,className2为要折行省略的字符串,clampNum为折行数。
dotSet: function (className1, className2, clampNum) {
let list = $(className2);
let ce = document.createElement.bind(document),
ctn = document.createTextNode.bind(document);
for (let i = 0; i < list.length; i++) {
if(list[i].clientHeight > (24 * clampNum)){
let width = null;
if(className1 !== ''){
// 冒号前 宽度
width = $(className1)[i].offsetWidth;
// 冒号后 宽度
width = list[i].offsetWidth - width;
}else{
width = list[i].offsetWidth;
}
let text = list[i].innerText;
// 建立一个虚拟节点
let measure = ce('span');
(function (s) {
s.position = 'absolute'; // 防止页面重排
s.whiteSpace = 'pre'; // 跨浏览器的宽度结果
s.visibility = 'hidden'; // 防止绘图
})(measure.style);
list[i].appendChild(measure);
// 第一行
let str1 = '';
// 第二行
let str2 = '';
// 第三行
let str3 = '';
// 多行flag
let lineFlag = false;
measure.offsetWidth = 0;
for (let j = 0; j < text.length; j++) {
// 虚拟节点填入字符
measure.appendChild(ctn(text[j]));
// 判断长度接近上限
if((width < measure.offsetWidth) || ((width - 7) < measure.offsetWidth)){
if(clampNum > 2 && !lineFlag){
lineFlag = true;
measure.innerHTML = '';
measure.appendChild(ctn(text[j]));
str2 += text[j];
}else if(clampNum > 2 && lineFlag){
// 第三行文字
str3 += text[j];
}else{
// 第二行文字
str2 += text[j];
}
}else{
if(lineFlag){
// 第二行文字
str2 += text[j];
}else{
// 第一行文字
str1 += text[j];
}
}
}
list[i].innerText = str1;
let str = str3;
if(str3 == ''){
str = str2;
}else{
// 存在第三行 设置第二行
let line2 = ce('span');
// 属性设置
(function (s) {
s.display = 'inline-block';
s.width = list[i].offsetWidth + 'px';
})(line2.style);
line2.appendChild(ctn(str2));
list[i].appendChild(line2);
}
// 设置最后一行
lineFinally = ce('span');
// 属性设置
(function (s) {
s.display = 'inline-block';
s.overflow = 'hidden';
s.textOverflow = 'ellipsis';
s.whiteSpace = 'nowrap';
s.width = list[i].offsetWidth + 'px';
})(lineFinally.style);
lineFinally.appendChild(ctn(str));
list[i].appendChild(lineFinally);
}
}
}
此处为js调用方法。
CommonUtils.dotSet('.clamp1','.clamp2', 2);
CommonUtils.dotSet('','.message-data-low', 3);
总结
方法过于繁琐,只对于此次项目中的IE使用,其他浏览器的兼容性更好,三行css即可设置完成。方法代码在下面的网址可找到。
https://codepen.io/feiwen8772/pen/AckqK