實現文本省略:
<!-- html代碼 --> <p class="single">該文的主題思想即對自由境界的向往。朱自清當時雖置身在污濁黑暗的舊中國，但他的心靈世界則是一片澄澈明凈，他的精神依然昂奮向上。朱自清把他健康高尚的審美情趣，把他對美好事物的無限熱愛，將他對人生理想的不懈追求熔鑄到文章中去。熔鑄到詩一樣美麗的語言中去。從而使整篇文章洋溢着濃濃的詩意，產生了經久不衰的藝術魅力<p> /*css代碼*/ /*單行*/ .single{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /*多行*/ .single{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; flex-direction: column; }
注意:如果想實現三行省略可以修改屬性 -webkit-line-clamp:3
實現效效果:
