巧妙判断文本是否溢出两行
如何精准判断文本是否超过两行？CSS的-webkit-line-clamp属性提供了一种便捷的解决方案。通过设置-webkit-line-clamp: 2，我们可以限制文本显示为两行。如果文本长度超过两行，浏览器会自动添加省略号。
为了实现“展开收起”功能，我们需要结合以下CSS样式：
.text-container { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer;}
text-overflow: ellipsis; 显示省略号；white-space: nowrap; 防止文本换行；overflow: hidden; 隐藏超出容器的文本；cursor: pointer; 将鼠标指针变为手型，提示用户可点击。
立即学习“Java免费学习笔记（深入）”；
创建“展开收起”按钮
使用简单的HTML代码添加按钮：
并设置CSS样式，使其定位于文本下方：
#toggle-button { position: absolute; bottom: 0; right: 0;}
JavaScript实现状态切换
最后，通过JavaScript代码控制文本显示状态和按钮文字的切换：
document.getElementById("toggle-button").addEventListener("click", function() { const textContainer = document.querySelector(".text-container"); if (textContainer.classList.contains("collapsed")) { textContainer.classList.remove("collapsed"); this.textContent = "收起"; } else { textContainer.classList.add("collapsed"); this.textContent = "展开"; }});
这段代码监听按钮点击事件，通过添加或移除collapsed类名来控制文本的显示状态，并同时更新按钮文字。 你需要在你的CSS中定义.text-container.collapsed样式来控制文本收起时的显示方式（例如，恢复文本换行，移除white-space: nowrap;和overflow: hidden;等）。
通过以上CSS和JavaScript代码的结合，即可实现文本溢出两行判断及展开收起效果。 记住将.text-container类名应用于包含你的文本的元素。
以上就是文本是否溢出两行，如何用CSS和JavaScript实现展开收起效果？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1502002.html
微信扫一扫 
支付宝扫一扫 
