15.多余文字省略号显示

一行文字末尾省略号显示

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

注意：宽度不能超出父级元素的宽度

举例子：

  <div class="box">
    <p class="content">
      HTML CSS Javscript Vue React
    </p>
  </div>

*{
  margin: 0;
  padding: 0;
}
.box{
  width: 200px;
  margin: 10px auto;
  border: 1px solid #000;
}
.content{
  height: 36px;
  line-height: 36px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

运行结果：

多行文字末尾省略号显示

举例子：

  <div class="box">
    <p class="content">
      成为网红，做直播带货似乎已经成为了当前一个极为受大众推崇的职业。而众多的网红也是良莠不齐，但刘畊宏的走红则是备受大众推崇谁也没曾想到，刘畊宏的涨粉速度会这么的快,一夜爆红，一夜涨粉超过千万。 而刘畊宏如今的粉丝已经了7,000万，开始奔着8,000万去了。
    </p>
  </div>

*{
  margin: 0;
  padding: 0;
}
.box{
  width: 200px;
  margin: 10px auto;
  border: 1px solid #000;
}
.content{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient:vertical ;
}

不同内核浏览器，写法不同。
运行结果：