文字溢出省略
程序员文章站
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>
下一篇： 【python】多任务（1. 线程）