文本超出显示省略号

超出一行就用省略号代替

.container {
  border: 1px solid gray;
  width: 300px;
  height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

超出指定行数隐藏

.container {
  border: 1px solid gray;
  width: 300px;
  height: 100px;
  span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 可以显示的行数，超出部分用...表示*/
    -webkit-box-orient: vertical;
  }
}

注意使用该属性只能给子元素设置,不能设置给有固定高度的div,否则导致虽然第二行有省略号,但后面超出的高度不会隐藏,文本会继续展示 

鼠标移入显示全部内容的方法

&:hover {
  overflow: visible;
  text-overflow: inherit;
  display: block; // 加上此行，解决全显示时，...还存在的问题
}