超過兩行顯示省略號 -webkit-line-clamp、-webkit-box-orient vue打包后不起作用


為了實現兩行顯示縮略顯示,但是本地是可以顯示,打包后不起作用

word-break: break-all;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

 

 

 

 

超過兩行顯示省略號

1 display: -webkit-box;
2 -webkit-box-orient: vertical;
3 -webkit-line-clamp: 2;
4 word-break: break-all;
5 overflow: hidden;

overflow:hidden 是必須的 
word-break:break-all;必須的,連續英文折行

網上有這么說的 

第一種

autoprefixer只自動添加webkit,其他的不加

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

第二種

1、安裝依賴這個依賴:npm i -S optimize-css-assets-webpack-plugin

2、並且注釋掉webpack.prod.conf.js中的一段代碼:

new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    })

個人推薦第二種方法,因為只要修改配置看就好了,第一種還有每個地方都要寫 autoprefixer


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM