css文字多行顯示超出顯示省略號
阿新 • • 發佈：2018-12-14
首先，要知道css的三條屬性。
overflow:hidden; //超出的文字隱藏
text-overflow:ellipsis;//溢位用省略號顯示
white-space:nowrap;//溢位不換行
css3解決了這個問題，解決方法如下：
display:-webkit-box; //將物件作為彈性伸縮盒子模型顯示。
-webkit-box-orient:vertical; //從上到下垂直排列子元素（設定伸縮盒子的子元素排列方式）
-webkit-line-clamp:2;//這個屬性不是css的規範屬性，需要組合上面兩個屬性，表示顯示的行數。
最後實現的程式碼：
(僅限於手動書寫css的情況)
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; // 參考 https://github.com/postcss/autoprefixer/issues/776
(適用於webpack配合預編譯工具的情況，會自動將-webkit-box-orient 清除)
打包時必須使用這種方法打包，否則打包後 -webkit-box-orient: vertical 便會消失.
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* autoprefixer: off */ -webkit-box-orient: vertical; // 參考 https://github.com/postcss/autoprefixer/issues/776 /* autoprefixer: on */
通常情況下，上面這種註釋的方式就有效了，如果因為種種原因無效，嘗試另外一種通過 optimize-css-assets-webpack-plugin 外掛也能解決這個問題。前提是專案本身就適用了這個外掛，不然為了“換行省略號”這個效果去多安裝一個webpack外掛就不划算了。
註釋掉webpack.prod.conf.js中下面的程式碼
new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }),
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
width: 100px;
/* height: 20px; */
}
.container p {
font-size: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="container">
<td>
<p>
你在元件中使用你在元件中使用你在元件中使用 this.$store.dispatch('xxx') 分發 action，或者使用 mapActions 輔助函式將元件的 methods 對映為 store.dispatch 呼叫（需要先在根節點注入
store）：
</p>
</td>
</div>
</body>
</html>
需要注意的一點是，如果換行處是一個完整的英文單詞，換行不會將單詞拆開，而是會直接將整個單詞省略並顯示省略號。