多行文本超出范围显示省略号，IE使用。

对于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