富文本超过省略号方案

// 富文本省略号
        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 @ 2023-02-24 15:03  小寒爱吃西红柿  阅读(115)  评论(0编辑  收藏  举报