css实现兼容性多行文字省略号

前端之家收集整理的这篇文章主要介绍了css实现兼容性多行文字省略号前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<table class="html5"><tr class="li1">
<td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

>     >Lorem ipsum dolor sit amet,consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.> > >     .wrap {         height: 40px;         line-height: 20px;         overflow: hidden;     }     .wrap .text {         float: right;         margin-left: -5px;         width: 100%;         word-break: break-all;     }     .wrap::before {         float: left;         width: 5px;         content: '';         height: 40px;     }     .wrap::after {         float: right;         background: #ffffff;         content: "...";         /*一半*/         height: 20px;         line-height: 20px;         /* 为三个省略号的宽度 */         width: 3em;         /* 使盒子不占位置 */         margin-left: -3em;         /* 移动省略号位置 */         position: relative;         left: 100%;         top: -20px;/*一半*/         padding-right: 5px;     } > 链接:https://mp.weixin.qq.com/s/VJZ6oAve551i1UGr9V_TTA     原文链接:https://www.f2er.com/note/411422.html

猜你在找的程序笔记相关文章