首页 > > 网页制作 > css >

文字溢出省略

2019-11-21 08:32:52来源：博客园阅读 ()

文字溢出省略

单行省略

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>