文字溢出省略

時間 2019-11-21

標籤文字溢出省略简体版

原文原文鏈接

單行省略html

display: block;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;

多行省略（數字即爲自定義的行數）/（須要注意溢出隱藏的高度）web

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;

　　小示例spa

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。