超过一行进行省略点击展开变成收起并展开
时间: 2024-05-23 08:12:20 浏览: 77
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
好的,以下是示例:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, <span id="ellipsis">...</span><span id="expanded" style="display:none">nisi vel posuere suscipit, nunc nisi finibus enim, vel euismod velit orci sed sapien. Morbi vel risus quis dui vehicula consectetur. In euismod dapibus eleifend. Sed euismod dolor sit amet leo efficitur, ac vestibulum justo posuere. Sed lobortis ipsum in nulla iaculis, ut hendrerit sapien gravida. Suspendisse imperdiet velit eget mi blandit, sit amet sollicitudin mi laoreet. Nullam accumsan lorem at eros malesuada, non bibendum lectus bibendum. Aliquam cursus urna eu nisl congue, ut tempor metus lacinia. Aenean ac ornare sapien, id pharetra magna. Quisque in risus blandit, ultricies velit eget, vulputate nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </span><a href="#" onclick="javascript:expand();">展开</a>
<script>
function expand() {
document.getElementById("ellipsis").style.display = "none";
document.getElementById("expanded").style.display = "inline";
}
</script>
点击“展开”链接后,会将省略号替换为完整文本,并展现“收起”链接。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisi vel posuere suscipit, nunc nisi finibus enim, vel euismod velit orci sed sapien. Morbi vel risus quis dui vehicula consectetur. In euismod dapibus eleifend. Sed euismod dolor sit amet leo efficitur, ac vestibulum justo posuere. Sed lobortis ipsum in nulla iaculis, ut hendrerit sapien gravida. Suspendisse imperdiet velit eget mi blandit, sit amet sollicitudin mi laoreet. Nullam accumsan lorem at eros malesuada, non bibendum lectus bibendum. Aliquam cursus urna eu nisl congue, ut tempor metus lacinia. Aenean ac ornare sapien, id pharetra magna. Quisque in risus blandit, ultricies velit eget, vulputate nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 收起
阅读全文