CSS-单行省略和多行省略

单行省略

div {  
  white-space:nowrap;/* 规定文本是否折行 */  
  overflow: hidden;/* 规定超出内容宽度的元素隐藏 */
  text-overflow: ellipsis;
  /* 规定超出的内容文本省略号显示，通常跟上面的属性连用，因为没有上面的属性不会触发超出规定的内容 */
}

有时候因为弹性或者浮动等情况不生效的话，可以在加个max-width 限制宽度来实现

多行省略

div {      
  overflow: hidden;      
  text-overflow: ellipsis;      
  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */      
  -webkit-line-clamp: 4; /* 控制最多显示几行 */      
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */    
}

这里我们可以把 -webkit-line-clamp变成动态的  通过JS来控制  封装成一个组件 可以来实现 动态省略几行的功能，而不是单独固定死，不能改变，