CSS+HTML<文字超出省略号显示(支持换行)>

效果图：

image.png

** -webkit-line-clamp: 3;** //超出几行时省略号显示，此处是3行

代码如下：

    
    
    
    
    



    
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

此处要注意，如果在vue中，使用webpack打包时，会把 -webkit-box-orient: vertical;给忽略掉，这时需要在这段css语句前后加上这样的注释就能解决问题

       /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */