文字不换行，超出部分显示成省略号

 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>

效果图如下：

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xiaqilin/p/6769984.html