單行省略 display: block; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; 多行省略 （數字即為自定義的行數）/（需要註意溢出隱藏的高度） overflow:hidden; text-overflow:ell ...
單行省略
display: block; overflow: hidden; white-space: nowrap; text-overflow:ellipsis;
多行省略 （數字即為自定義的行數）/（需要註意溢出隱藏的高度）
overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
小示例
1 <style> 2 .dan{ 3 font-size:14px; 4 color:#000000; 5 line-height:40px; 6 height: 40px; 7 width:300px; 8 background:pink; 9 /* 單行省略 */ 10 display: block; 11 overflow: hidden; 12 white-space: nowrap; 13 text-overflow:ellipsis; 14 } 15 .duo{ 16 height:120px; 17 width:300px; 18 background:pink; 19 line-height:40px; 20 margin-top:20px; 21 /* 多行省略 */ 22 overflow:hidden; 23 text-overflow:ellipsis; 24 display:-webkit-box; 25 -webkit-box-orient:vertical; 26 -webkit-line-clamp:3; 27 } 28 </style> 29 <body> 30 <div class="dan">這個是單行省略這個是單行省略這個是單行省略這個是單行省略</div> 31 <div class="duo">這個是多行省略這個是多行省略這個是多行省略這個是多行省略這個是多行省略這個是多行省略這個是多行省略這個是多行省略咋回事兒咋回事兒咋回事兒</div> 32 </body> 33 </html>
