设定文字行数 末尾加 查看全部

<div id='desc'</div>
// 描述
#desc{
    margin-top: 20px;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #5C5E66;
    // letter-spacing: 0;
    line-height: 22px;
    width:100%;
    height:110px;
    overflow:auto;
}
 1  {
 2 
 3     const el = document.getElementById('desc');
 4     const s = el.textContent;
 5     const n = el.offsetHeight;
 6 
 7     for (let i = 0; i < s.length; i++) {
 8       el.innerHTML = s.substr(0, i);
 9       if (n < el.scrollHeight) {
10         el.style.overflow = 'hidden';
11         el.innerHTML = s.substr(0, i - 8) + '... <span id="all">查看全部</span>';
12         break;
13       }
14     }
15 
16     el.onclick = function (e)
17     {
18 
19       if (el.style.overflow === 'hidden') {
20         el.innerHTML = s;
21         el.style.overflow = 'auto';
22         el.style.height = 'auto';
23       } else {
24         for (let i = 0; i < s.length; i++) {
25           el.innerHTML = s.substr(0, i);
26           if (n < el.scrollHeight) {
27             el.style.overflow = 'hidden';
28             el.style.height = '110px';
29             el.innerHTML = s.substr(0, i - 8) + '... <span id="all" >查看全部</span>';
30 
31             break;
32           }
33         }
34       }
35     };
36 
37   }

猜你喜欢

转载自www.cnblogs.com/zhujin/p/10643721.html