当前位置： 移动技术网 > IT编程>网页制作>CSS > 文字溢出省略

文字溢出省略

2019年11月22日  | 移动技术网IT编程  | 我要评论

单行省略

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>

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网