HTML(多行)文本超过部分隐藏,末尾显示(...)
HTML(多行)文本超过部分隐藏,末尾显示(...)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML(多行)文本超过部分隐藏,末尾显示(...)</title> </head> <style> /* 一行 */ .overline { max-width: 200px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 一行 */ .overline1 { max-width: 200px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* 多行 */ .overline2 { max-width: 200px; display: -webkit-box; -webkit-line-clamp: 2;/* 行数 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } </style> <body> <p class="overline"> 演示演示演示演示演示演示演示演示演示演示演示演示 演示演示演示演示演示演示演示演示演示演示演示演示 演示演示演示演示演示演示演示演示演示演示演示演示 演示演示演示演示演示演示演示演示演示演示演示演示 </p> <p class="overline1"> 演示演示演示演示演示演示演示演示演示演示演示演示 演示演示演示演示演示演示演示演示演示演示演示演示 演示演示演示演示演示演示演示演示演示演示演示演示 演示演示演示演示演示演示演示演示演示演示演示演示 </p> <p class="overline2"> 演示演示演示演示演示演示演示演示演示演示演示演示 演示演示演示演示演示演示演示演示演示演示演示演示 演示演示演示演示演示演示演示演示演示演示演示演示 演示演示演示演示演示演示演示演示演示演示演示演示 </p> </body> </html>
一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱。