极客观点
项目管理
HarmonyOS
有这么个需要，列表中显示内容，默认显示3行文字，文本内容超出3行文字，显示展开/收起箭头
当前的实现是截取固定长度的文本，使之最多显示三行，现在遇到一个问题是，文本长度相同，文本
全是中文 和 不全是中文 所显示的行数是不同，有没有什么好的方式可以适应
我现在想到的一个笨方法是，逐个字符判断，如果是中文的长度+2，如果是非中文的长度+1，然后在根据总数来截取不同的长度
PS：本方法只是个想法，还未进行验证
环境要求:最低支持IE8
如何使用js显示固定长度内容显示，默认状态显示3行文本，点击按钮显示更多
阅读 9.4k
需要配置JS来判断文字内容是否超过设定的容器的初始高度，如果超过就设置折叠的CSS否者不设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
position: absolute;
left:10px;
right:10px;
width: 200px;
border: 1px solid red;
position: relative;
}
.content{
font-size: 16px;
line-height: 1.5;
width: 100%;
color: #556170;
word-break: break-all;
text-align: justify;
margin: 0;
position: relative;
}
.collapse .content::after{
content: ' ... ';
position: absolute;
right: 0;
bottom: 0;
background: linear-gradient(to right, transparent, #ffffff 50%);
padding-left: 20px;
}
.collapse .expand-collapse::after{
content: '展开';
display: block;
color:red;
width: 100%;
text-align: right;
}
.expand .expand-collapse::after{
content: '收缩';
display: block;
color:red;
width: 100%;
text-align: right;
}
.collapse .content{
overflow: hidden;
height: 50px;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<p class="content ">当前的实现是截取固定长度的文本，使之最多显示三行，现在遇到一个问题是，文本长度相同，文本
全是中文 和 不全是中文 所显示的行数是不同，有没有什么好的方式可以适应</p>
<div class="expand-collapse"></div>
</div>
<script>
var expandCollapseDiv;
var containerBoundingClientRect=document.querySelector(".container").getBoundingClientRect();
var contentBoundingClientRect=document.querySelector(".content").getBoundingClientRect();
if(containerBoundingClientRect.height>50){
document.querySelector(".container").setAttribute("class","container collapse");
}else{
document.querySelector(".container").setAttribute("class","container");
document.querySelector(".container").removeChild(document.querySelector(".expand-collapse"))
}
document.querySelector(".container").addEventListener("click",function(){
if(!expandCollapseDiv){
expandCollapseDiv=document.querySelector(".expand-collapse");
}
console.log(event.target);
if(event.target===expandCollapseDiv){
if(document.querySelector(".container").getAttribute("class").split(" ").indexOf("collapse")!==-1){
document.querySelector(".container").setAttribute("class","container expand");
}else{
document.querySelector(".container").setAttribute("class","container collapse");
}
}
},false);
</script>
</body>
</html>新手上路，请多包涵
超出部分2行自动换行，第二行是省略号 ：
text-overflow:
-o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
js 如何将Key属性相同的放在同一个数组？
{代码...} 说明：id和name是动态的，有可能后台返回的是age和school,不是固定id和name想要的结果是; {代码...}13 回答12.7k 阅读
Next.js做纯前端是否可行？
最近在学习Next.js存在一个疑问，如果只需要做前端界面的渲染和交互后端逻辑都用java来做，是否还需要使用Next.js，还是说直接使用React+Tailwind css更好7 回答1.9k 阅读
如何实现一个深拷贝函数？
在项目开发中，如何实现一个深拷贝函数？3 回答1.1k 阅读✓ 已解决
git提交记录问题？
"git add .“添加了所有文件.这样导致了项目里每一行代码的修改记录都变成了这次的提交备注"update gitignore"。后续其他同事也提交了几次记录。想着回滚回这次修改以前的，再让同事们重新提交自己的修改。但同事们已经pull过代码，可能也区分不出来了。 有什么方法删除掉gitignore的这次提交，并保留同事们后续的提交？2 回答1.1k 阅读✓ 已解决
怎么获取动态弹出对话框的模拟单击？
我在用js实现自动化刷课脚本的时候，要处理一个“继续学习”弹出对话框，才能播放。使用document.queryselctor('.continue')获取不到，好像也没有click事件;6 回答786 阅读✓ 已解决
什么是闭包？闭包有哪些应用场景？
什么是闭包？闭包有哪些应用场景？6 回答1k 阅读
求一个能输入需求就可以写出代码的网站，支持一键部署？
求一个网站，生成准确率高2 回答1.3k 阅读✓ 已解决
换个设计展示形式吧， 就和移动端字号自适应，文字超出两行必须加个详情俩字一样，很难受。