文本超出隐藏显示省略号css 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             div{
 8                 width: 100px;
 9                 margin-top: 10px;
10                 border: 1px solid #F8B3D0;
11             }
12             .d1{
13                 /* 1.单行 */
14                 /* 超出隐藏 */
15                 overflow: hidden;
16                 /* 文本不换行 */
17                 white-space: nowrap;
18                 /* 省略号 */
19                 text-overflow: ellipsis;
20             }
21             .d2{
22                 /* 2.多行 */
23                 /*
24                 text-overflow : clip | ellipsis
25                 当对象内文本溢出时    clip 直接裁剪
26                                     ellipsis 显示省略标记
27                 display: -webkit-box;    将对象作为弹性伸缩盒子模型显示
28                 -webkit-box-orient    设置或检索伸缩盒子元素的排列方式 vertical垂直
29                 -webkit-line-clamp    限制显示文本的行数
30                 */
31                 
32                 overflow: hidden;
33                 text-overflow: ellipsis;
34                 display: -webkit-box;
35                 -webkit-box-orient: vertical;
36                 -webkit-line-clamp: 2;
37             }
38         </style>
39     </head>
40     <body>
41         <div>
42             这是一段超长超长超长超长的文本
43         </div>
44         <div class="d1">
45             这是一段超长超长超长超长的文本
46         </div>
47         <div class="d2">
48             这是一段超长超长超长超长的文本
49         </div>
50     </body>
51 </html>

效果：

posted @ 2021-10-27 20:18  十七日尾  阅读(46)  评论(0)    收藏  举报