富文本超过省略号方案

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
44
45
46
// 富文本省略号
        function richTextEllipsis(index = 0) {
            // 1.获取容器的高度---》220
            // 判断p的内容高度是否大于剩余的高度,否则,就用总高度-p的真实高度(含padding)
            // 2.循环获取每一个p标签的高度 ---》230
            // 3.容器高度-p的高度,得到剩余高度,如果当前p的高度大于剩余高度,
            //   就。。。,后面的p直接去掉
            var _richText = $('.rich-text').eq(index)
            var _cH = _richText.height() // 容器总高度
            var _syH = _cH // 剩余高度
            var _pIns = _richText.find('.real-text').children('p') // 所有的p标签
            var _pLen = _pIns.length
            var _isTrue = false
            for (var i = 0; i < _pLen; i++) {
                if (_isTrue) {
                    _pIns.eq(i).text('')
                    continue
                }
                var _pcH = _pIns.eq(i).outerHeight() // p标签的内容高度
                if (_syH <= 0) {
                    _pIns.eq(i).text('')
                    _isTrue = true
                    continue
                }
                // 内容高度是否大于剩余高度,如果大于剩余高度,就截取
                if (_pcH > _syH) {
                    var _pCont = ''
                    var a = 0
                    while (_pcH > _syH) {
                        a++
                        if (/^(.)\1+$/.test(_pIns.eq(i).text())) {
                            break
                        }
                        if (a > 200) {
                            break
                        }
                        _pIns.eq(i).text(_pIns.eq(i).text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
                        // 重新获取内容高度
                        _pcH = _pIns.eq(i).outerHeight()
                    };
                    _isTrue = true
                } else {
                    _syH -= _pIns.eq(i).outerHeight(true)
                }
            }
        }

  

posted @   小寒爱吃西红柿  阅读(134)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示