首页 > 其他分享 >富文本超过省略号方案

富文本超过省略号方案

时间:2023-02-24 15:11:47浏览次数:32  
标签:方案 省略号 text syH 高度 pIns var 文本 eq

// 富文本省略号
        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)
                }
            }
        }

  

标签:方案,省略号,text,syH,高度,pIns,var,文本,eq
From: https://www.cnblogs.com/fanqieyuanzi/p/17151518.html

相关文章

  • JSP文件夹上传解决方案
    ​ 第一点:Java代码实现文件上传FormFilefile=manform.getFile();StringnewfileName= null;Stringnewpathname= null;StringfileAddre= "/numUp";try{......
  • 瓴羊Quick BI率先提供移动端自助分析整体解决方案,成为行业的领导者!
    瓴羊QuickBI已经率先提供移动自助分析整体解决方案,从而帮助企业客户将数据更好的融入到方方面面,比如日常决策、企业运营和具体工作当中。同时还能够提供基于移动端的自助分......
  • SpringCloud大文件上传解决方案
    ​ javaweb上传文件上传文件的jsp中的部分上传文件同样可以使用form表单向后端发请求,也可以使用ajax向后端发请求    1.通过form表单向后端发送请求     ......
  • SpringBoot大文件上传解决方案
    ​前言 文件上传是一个老生常谈的话题了,在文件相对比较小的情况下,可以直接把文件转化为字节流上传到服务器,但在文件比较大的情况下,用普通的方式进行上传,这可不是一个......
  • 23-技术方案
    Docker  容器数据卷:容器数据卷,作用就是将Docker容器内的数据保存并同步到宿主机的硬盘中。如下图所示。卷的设计目的就是数据的持久化,完全独立于容器的生存周期,因此......
  • mybatis-属性名和查询字段名不相同的解决方案
    1.使用别名resultType可以将查询结果直接映射为实体bean对象的条件是,sql查询的字段名和实体bean的属性名一致,通过反射机制完成对象的创建。selecttidid,tnamename。......
  • 浅析无人值守+智慧巡检变电站安全管控系统设计方案
    一、项目背景安全是电力生产的基石,确保电网安全和人身安全,是电网企业安全工作的出发点和落脚点。随着智能信息化技术应用越来越广泛,智能信息化现场安全管理是近年来基于......
  • sudo深入解析(免密+权限精细分配的几种方案)
                    sudo深入解析(免密+权限精细分配的几种方案)在系统运维时,免不了需要配置sudo以提高系统的安全性,那么,具体的做法应该如何实现......
  • Linux docker的网络隔离方案和网络模式的使用问题
        Linuxdocker的网络隔离方案和网络模式的使用问题docker的网络管理比较复杂,是由于它的网络是基于Linux内核的namespace开始。docker刚安装完毕后,最开始的docker......
  • Nacos 端口被占用的解决方案
    Nacos需要使用三个端口来运行,出现端口被占用的错误时可以看看下边这些端口的占用情况需要注意的是,nacos的端口是计算出来的,以8848为基准,加上或减去偏......