Javascript 用几个点替换多HTML文本的结尾

我的分数如下：

if（$（'.replacetext'）.text（）.length>20）{
var linkText=$（'.replacetext'）.text（）；
$（'.replacetext'）.html（linkText.substring（0,20）+“…”）
$（'.replacetext'）。在（“单击”，函数（e）{
log（“linkText:：”，linkText）；
$（'.replacetext'）.html（linkText）；
});
}

请参见

---

加上所有这些。排成一行

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width:100px; // some width

在多行中执行您实际要求的操作

#content{
overflow: hidden;
width:100px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

---

请注意，目前仅在web工具包浏览器中支持此多行代码。

首先，我将重新考虑使用

a

标记。你没有链接。用别的东西。那就交给你了

接下来，您要存储原始文本。我将为此使用数据属性

最后，您只想更新单击元素的文本。我们将使用

this

关键字在这里提供帮助

//浏览每个长标题
$（'.replacetext'）。每个（函数（）{
//如果长标题
如果（$（this）.text（）.length>20）{
//将原始字符串存储在数据属性中
$（this.data（“og”，$（this.text（））；
//替换文本
$（this.html（$（this.text（）.substring（0,20）+“…”）
}
});
$（'.replacetext'）。在（“单击”，函数（e）{
//停止链接到任何地方
e、 预防默认值（）；
log（“原始文本：”+$（this.data（“og”））；
//替换为原来的
$（this.text（$（this.data（“og”））；
});
这只是一个概念证明，有许多未处理的潜在陷阱，但您可以递归地迭代元素的子元素并截断文本节点

我不是说这是个好主意。您将遇到空格并发症和边缘情况。只是说理论上可以这样做


const TEXT=3；
常量元素=1；
函数截断元素（元素，最大长度）{
剩余=最大长度；
[…elem.childNodes].forEach（节点=>{
if（node.nodeType==文本）{
node.nodeValue=node.nodeValue.substr（0，剩余）；
剩余-=node.nodeValue.length；
}
else if（node.nodeType==元素）{
truncateElement（节点，剩余）；
}
});
如果（！剩余）{
元素appendChild（document.createTextNode（“…”）；
}
}
document.querySelector（'按钮'）
.addEventListener(
“点击”，
（）=>truncateElement（document.querySelector（'h5'），20）
);

截至20
您考虑过CSS吗？是的，我尝试过，但没有成功满足我的条件。使用javascript不是一个好的解决方案。就像我上面用的一样。谢谢你的回复
#content{
overflow: hidden;
width:100px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}