文本超出的部分显示省略号

CSS实现文本超出省略号

    -注意：css实现省略号的时候，一定要设置宽度！

第一种：实现单行文本超出，显示省略号
效果图：

image.png
html部分：（下面的例子用的是同一个html,所以就不重复了）

<div class="box">
      轻轻的我走了， 正如我轻轻的来； 
      我轻轻的招手， 作别西天的云彩。
      那河畔的金柳，  是夕阳中的新娘； 
      波光里的艳影，在我的心头荡漾。
</div>

css部分：

.box {
width: 300px; 
  height: 50px;
  padding: 5px 10px;
  color: #0fa993;
  border: 1px solid hotpink;
//重点代码

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

注意：
1.text-overflow: ellipsis; //必须和overflow:hidden搭配使用
2.white-space: nowrap; //控制单行

第二种：实现多行文本超出，显示省略号
效果图：

image.png

css部分：

.box{
  width: 300px; 
  height: 50px;
  padding: 5px 10px;
  color: #0fa993;
  border: 1px solid hotpink;
  //重点代码

  display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
  -webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
  -webkit-line-clamp: 2; //限制在一个块元素显示的文本的行数
  overflow: hidden;
}

注意：
1.display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
2.-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
3.-webkit-line-clamp: 2; //限制在一个块元素显示的文本的行数

JS实现文本超出，显示省略号

第一种：
效果图：

image.png
html 部分：

 <div class="box" ref="text">
      轻轻的我走了， 正如我轻轻的来； 
      我轻轻的招手， 作别西天的云彩。
      那河畔的金柳，  是夕阳中的新娘； 
      波光里的艳影，在我的心头荡漾。
 </div>

js部分：

 mounted() {
    function textLength(str, length) {
      if (str && str.length >= length) {
        str = str.substring(0, length)
        str = str + '...'
      }
      return str
    }
    let text = this.$refs.text.innerText
    this.$refs.text.innerText = textLength(text, 20)
  }

第二种：

js部分：

 mounted() {
    let text = this.$refs.text.innerText
    function textLength(text) {
      const length = text.length
      if (length > 30) {
        var str = ''
        str = text.substring(0, 30) + '......'
        return str
      } else {
        return text
      }
    }
    this.$refs.text.innerText = textLength(text)
  }