欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

文字溢出省略

程序员文章站 2023-08-30 14:19:27
单行省略 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>