文字溢出显示省略号

项目中常常有这种需要我们对溢出文本进行”…”显示的操作，看起来好像很6的样子，其实就是一坨**…用起来的时候（真香）

单行实现

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap

多行实现

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

只有 -webkit-内核 有用，适用于移动端 ：

• -webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中
• display: -webkit-box 将对象作为弹性伸缩盒子模型显示
• -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式
• text-overflow: ellipsis 以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本:

其他实现方式

伪类实现，没用过，多了个元素，不喜欢~

<div>
  <span id="txt">文本溢出省略号文本溢出省略号</span>
  <span class="t"></span>
</div>
<style>
#txt{
  display: inline-block;
  height: 40px;
  width: 1000px;
  line-height: 20px;
  overflow: hidden;
  font-size: 14px;
}
.t:after{
  display: inline;
  content: "...";
  font-size: 14px; 
}
</style>

绝对定位 + padding，不喜欢，原因同上~

<p id="txt2">文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略<span class="t2">...</span>
</p>
<style>
#txt2{
  position: relative;
  height: 40px;
  width: 250px;
  line-height: 20px;
  overflow: hidden;
  padding-right: 12px;
}  
.t2{
  position: absolute;
  right: 0;
  bottom: 0;
}
</style>

JS实现，这个可以有

function mitulineHide(num,con){
  var contain = document.getElementById(con);
  var maxSize = num;
  var txt = contain.innerHTML;
  if(txt.length>num){
    console.log('1')
    txt = txt.substring(0,num-1)+"..."
    contain.innerHTML = txt;
  }else{
    console.log("error")
  }
};

参考 + 复制：

https://www.cnblogs.com/yzg1/p/5089534.html