nuxt.js中發生的樣式問題：css文字多行溢出無效解決方案

.box {
     display: block;
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
     overflow: hidden;
}

上面代碼是咱們經常解決html 文字多行溢出的方式，普通模式下html傳統開發彷佛並不太會出現什麼問題。

 

最近在開發nuxt.js項目中，有一塊區域元素想實現這樣的溢出功能，變按照上面的代碼去寫，可是結果出來並無什麼改變，屢次調試竟然發現該元素應用樣式中並無

-webkit-box-orient這個關鍵的屬性，這究竟是怎麼回事呢？

 

在咱們現代開發中，爲了提升前端工程便於維護和提升開發效率，咱們經常使用webpack，gulp等一類的構建工具，在css處理方面，可能經常使用到的是 postcss這個強大的css預處理插件，詳細用處就不用多說了。在查閱一些資料發現，是  autoprefixer   這個插件引發的，已集成在 postcss中，用來處理不一樣瀏覽器中自動填充css前綴的兼容性問題。

 

nuxt.js官方腳手架正包含了這一插件，按照一些社區提供解決的方案，能夠在以上樣式作如下修改

.box {
     display: block;
     display: -webkit-box;
     /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
     overflow: hidden;
}

/* autoprefixer: ignore next  */
[css rules]

這句話標記做用能夠讓 autoprefixer 插件關閉對下一句css代碼的檢查或處理