实现多行文本展开收起
css实现
<div class="wrapper"> <input id="exp1" class="exp" type="checkbox"> <div class="text"> <label class="btn" for="exp1"></label> 浮动元素是如何定位的 正如我们前面提到的那样,当一个元素浮动之后,它会被移出正常的文档流,然后向左或者向右平移,一直平移直到碰到了所处的容器的边框,或者碰到另外一个浮动的元素。 在下面的图片中,有三个红色的正方形。其中有两个向左浮动,一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动,它们会继续向右堆放,直到填满容器一整行,之后换行至下一行。 </div> </div> <div class="wrapper"> <input id="exp2" class="exp" type="checkbox"> <div class="text"> <label class="btn" for="exp2"></label> 浮动元素是如何定位的 正如我们前面提到的那样,当一个元素浮动之后,它会被移出正常的文档流,然后向左或者向右平移,一直平移直到碰到了所处的容器的边框,或者碰到另外一个浮动的元素。 </div> </div>
.wrapper { display: flex; margin: 50px auto; width: 800px; overflow: hidden; /* resize: horizontal; */ border-radius: 8px; padding: 15px ; box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; } .text { font-size: 20px; overflow: hidden; text-overflow: ellipsis; text-align: justify; /* display: flex; */ /* display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; */ position: relative; line-height: 1.5; max-height: 4.5em; transition: .3s max-height; } .text::before { content: ''; height: calc(100% - 26px); float: right; } .text::after { content: ''; width: 999vw; height: 999vw; position: absolute; box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff; margin-left: -100px; } .btn{ position: relative; float: right; clear: both; margin-left: 20px; font-size: 16px; padding: 0 8px; background: #3F51B5; line-height: 24px; border-radius: 4px; color: #fff; cursor: pointer; /* margin-top: -30px; */ } .btn::after{ content:'展开' } .exp{ display: none; } .exp:checked+.text{ max-height: none; } .exp:checked+.text::after{ visibility: hidden; } .exp:checked+.text .btn::before{ visibility: hidden; } .exp:checked+.text .btn::after{ content:'收起' } .btn::before{ content: '...'; position: absolute; left: -5px; color: #333; transform: translateX(-100%) }
js实现
renderDescription: function(rowData) { var content = rowData.note || '-'; var className = rowData.note ? 'align-left' : ''; return '<td><div class="table-cell-expand '+className+'">' + content + '</div></td>'; }, renderExpand: function() { $(".table-cell-expand").each(function() { if($(this)[0].scrollHeight > $(this)[0].clientHeight) { $(this).addClass("has-expand"); $(this).prepend("<span class='expand-btn'>... 展开</span>"); } }) // 收起时最大行数 $(".table-cell-expand")[0].style.setProperty("--expand-clamp", 3); // 展开收起的按钮点击事件 $(".table-cell-expand").on('click', function(event) { var target = event.target if($(event.target).hasClass('expand-btn')) { // 收起时,展开按钮放在内容前面。通过浮动摆放在内容后,形成文字环绕效果 // 展开后,最后一行不满一行,需要将展开按钮清除浮动,并放置在内容最后 $(target).parent().toggleClass("expanded"); if($(target).parent().hasClass("expanded")) { $(target).parent().append("<span class='expand-btn expanded-btn'>收起</span>") $(target).remove(); } else { var _this = this; $(this).on("transitionend", function() { $(target).parent().prepend("<span class='expand-btn'>... 展开</span>"); $(target).remove(); $(_this).off("transitionend") }) } } }) },
.table-cell-expand { overflow: hidden; line-height: 1.5; max-height: calc(var(--expand-clamp, 3) * 1.5em); transition: 0.3s; } .table-cell-expand.align-left { text-align: left; } .table-cell-expand.has-expand .expand-btn { float: right; clear: both; cursor: pointer; color: #1f81f8; } .table-cell-expand.has-expand .expand-btn.expanded-btn { float: none; } .table-cell-expand.has-expand::before { content: ''; float: right; width: 0; height: calc(calc(var(--expand-clamp, 3) - 1) * 1.5em); } .table-cell-expand.expanded { max-height: calc(var(--max-clamp, 15) * 1.5em); }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库