css 文字多行顯示超出顯示省略號
首先，要知道 css 的三條屬性。
overflow:hidden; //超出的文本隱藏
text-overflow:ellipsis;//溢出用省略號顯示
white-space:nowrap;//溢出不換行
css3 解決了這個(gè)問題，解決方法如下：
display:-webkit-box; //將對象作為彈性伸縮盒子模型顯示。
-webkit-box-orient:vertical; //從上到下垂直排列子元素（設(shè)置伸縮盒子的子元素排列方式）
-webkit-line-clamp:2;//這個(gè)屬性不是 css 的規(guī)范屬性，需要組合上面兩個(gè)屬性，表示顯示的行數(shù)。
最后實(shí)現(xiàn)的代碼：
(僅限于手動書寫 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 配合預(yù)編譯工具的情況，會自動將-webkit-box-orient 清除)
打包時(shí)必須使用這種方法打包，否則打包后 -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 */
通常情況下，上面這種注釋的方式就有效了，如果因?yàn)榉N種原因無效，嘗試另外一種通過 optimize-css-assets-webpack-plugin 插件也能解決這個(gè)問題。前提是項(xiàng)目本身就適用了這個(gè)插件，不然為了“換行省略號”這個(gè)效果去多安裝一個(gè) 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')
分發(fā) action，或者使用 mapActions 輔助函數(shù)將組件的 methods 映射為
store.dispatch 調(diào)用（需要先在根節(jié)點(diǎn)注入 store）：
</p>
</td>
</div>
</body>
</html>
需要注意的一點(diǎn)是，如果換行處是一個(gè)完整的英文單詞，換行不會將單詞拆開，而是會直接將整個(gè)單詞省略并顯示省略號。
