CSS文字溢出显示省略号

1.单行文本溢出显示省略号,文本溢出部分显示...

  
  
  
  




  

    天下武功唯快不破；天下武功唯快不破；天下武功唯快不破；天下武功唯快不破；天下武功唯快不破；天下武功唯快不破；
  

效果.png

1.1.overflow 属性规定当内容溢出元素框时发生的事情。

overflow.png

1.2.text-overflow 属性规定当文本溢出包含元素时发生的事情。

text-overflow.png

1.3. white-space 属性设置如何处理文本中的空白符（比如空格和换行符）。

white-space.png

2.多行文本溢出显示省略号,文本溢出部分显示...

  
  
  
  




  

    天下武功唯快不破；
    天下武功唯快不破；
    天下武功唯快不破；
    天下武功唯快不破；
  

效果.png

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中

注意：浏览器不兼容的就只能通过js处理

分享我发现一个好用的插件
vue-ellipsis 在此感谢作者：hyjiacan