文字不换行,超出部分显示成省略号
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .box { 8 width: 210px; 9 text-overflow: ellipsis; 10 white-space: nowrap; 11 overflow: hidden; 12 background: pink; 13 } 14 15 </style> 16 </head> 17 <body> 18 <div class="box"> 19 这里是一大段话,且超出我们外层的宽度</div> 20 </body> 21 </html>
效果图如下: