猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如何使用js显示固定长度内容显示，默认状态显示3行文本，点击按钮显示更多

https://img4.mukewang.com/5c8763e500018a8003090371.jpg

有这么个需要，列表中显示内容，默认显示3行文字，文本内容超出3行文字，显示展开/收起箭头

当前的实现是截取固定长度的文本，使之最多显示三行，现在遇到一个问题是，文本长度相同，文本
全是中文 和 不全是中文 所显示的行数是不同，有没有什么好的方式可以适应

https://img3.mukewang.com/5c8763e80001418d03590243.jpg

我现在想到的一个笨方法是，逐个字符判断，如果是中文的长度+2，如果是非中文的长度+1，然后在根据总数来截取不同的长度

PS：本方法只是个想法，还未进行验证

环境要求:最低支持IE8


茅侃侃
浏览 3496回答 3
3回答

Qyouu

我以前做过类似的，方法是固定显示2行的高度，用一个标签（text为展开）固定显示在右下角遮住原有的文字。JS控制点击标签改变文字容器高度
0

蛊毒传说

需要配置JS来判断文字内容是否超过设定的容器的初始高度，如果超过就设置折叠的CSS否者不设置<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>Title</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; .container{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left:10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right:10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 200px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid red;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .content{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; line-height: 1.5;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #556170;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; word-break: break-all;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: justify;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .collapse .content::after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: ' ... ';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: linear-gradient(to right, transparent, #ffffff 50%);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-left: 20px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .collapse .expand-collapse::after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: '展开';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color:red;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: right;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .expand .expand-collapse::after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: '收缩';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color:red;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: right;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .collapse .content{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 50px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body><div class="container">&nbsp; &nbsp; <p class="content ">当前的实现是截取固定长度的文本，使之最多显示三行，现在遇到一个问题是，文本长度相同，文本&nbsp; &nbsp; &nbsp; &nbsp; 全是中文 和 不全是中文 所显示的行数是不同，有没有什么好的方式可以适应</p>&nbsp; &nbsp; <div class="expand-collapse"></div></div><script>&nbsp; &nbsp; var expandCollapseDiv;&nbsp; &nbsp; var containerBoundingClientRect=document.querySelector(".container").getBoundingClientRect();&nbsp; &nbsp; var contentBoundingClientRect=document.querySelector(".content").getBoundingClientRect();&nbsp; &nbsp; if(containerBoundingClientRect.height>50){&nbsp; &nbsp; &nbsp; &nbsp; document.querySelector(".container").setAttribute("class","container collapse");&nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; document.querySelector(".container").setAttribute("class","container");&nbsp; &nbsp; &nbsp; &nbsp; document.querySelector(".container").removeChild(document.querySelector(".expand-collapse"))&nbsp; &nbsp; }&nbsp; &nbsp; document.querySelector(".container").addEventListener("click",function(){&nbsp; &nbsp; &nbsp; &nbsp; if(!expandCollapseDiv){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; expandCollapseDiv=document.querySelector(".expand-collapse");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; console.log(event.target);&nbsp; &nbsp; &nbsp; &nbsp; if(event.target===expandCollapseDiv){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(document.querySelector(".container").getAttribute("class").split(" ").indexOf("collapse")!==-1){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.querySelector(".container").setAttribute("class","container expand");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.querySelector(".container").setAttribute("class","container collapse");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },false);</script></body></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript