CSS两行文本溢出自动展开功能实现
在网页设计中，经常需要将文本限制在一定行数内显示，并提供“展开”功能以查看完整内容。本文将探讨如何使用CSS和JavaScript实现两行文本溢出自动展开的功能。
CSS -webkit-line-clamp 属性可以限制文本行数，但它本身不提供展开功能。我们需要结合JavaScript来检测文本是否溢出，并动态显示“展开”按钮。
以下CSS代码将文本限制在两行，并添加省略号：
.text-container {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
JavaScript代码则负责检测文本是否溢出：
立即学习“前端免费学习笔记（深入）”；
const textContainers = document.querySelectorAll('.text-container');
textContainers.forEach(container => {
const text = container.textContent;
const hasOverflow = container.scrollHeight > container.clientHeight;
if (hasOverflow) {
// 显示展开按钮
const expandButton = document.createElement('button');
expandButton.textContent = '展开';
expandButton.addEventListener('click', () => {
container.style.webkitLineClamp = 'unset';
expandButton.remove();
});
container.parentNode.insertBefore(expandButton, container.nextSibling);
}
});
这段代码首先选择所有具有.text-container 类的元素。然后，它遍历每个元素，检查其 scrollHeight (实际高度) 是否大于 clientHeight (可见高度)。如果大于，则表示文本溢出，创建并插入一个“展开”按钮。点击按钮后，移除 -webkit-line-clamp 限制，显示完整文本并移除按钮。
为了更完善的用户体验，可以考虑以下改进：
- 样式优化: 为展开按钮添加合适的样式。
- 收起功能: 在展开后添加“收起”按钮，以便用户可以再次折叠文本。
- 动画效果: 添加展开和收起的动画效果，使操作更流畅。
- 浏览器兼容性: 考虑不同浏览器的兼容性问题，可能需要添加其他CSS属性或JavaScript代码。
通过结合CSS和JavaScript，我们可以轻松实现两行文本溢出自动展开的功能，提升用户体验。 记住，需要根据具体设计需求调整CSS样式和JavaScript逻辑。 参考优秀的示例代码和文章，可以帮助你更好地理解和实现这个功能。
