### 一行顯示省略號 ***** 文本溢出處理需要三者合一 ``` display:?block; overflow:?hidden; text-overflow:?ellipsis; white-space:?nowrap; ``` ### 多行顯示省略號 ***** 設置多行取決于`-webkit-line-clamp: 2; `，2：行數 ``` .e-clamp { display:?-webkit-box; overflow:?hidden; text-overflow:?ellipsis; word-wrap:?break-word; white-space:?normal; -webkit-line-clamp:?2; -webkit-box-orient:?vertical; } ``` ### 多行文本溢出，尾部漸變 ***** ``` .e-clamp { ... position: relative; } .e-clamp:after { position: absolute; content: ""; bottom: 0; right: 0; width: 50%; text-align: right; background: linear-gradient( to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 100% ); } ```