### 一行显示省略号 ***** 文本溢出处理需要三者合一 ``` 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% ); } ```