巧用CSS和JavaScript实现多行文本展开效果
本文介绍如何优雅地处理多行文本溢出问题：当文本超过指定行数时，自动隐藏超出部分，并用展开箭头代替省略号，点击箭头即可展开完整文本。
首先，利用CSS控制文本显示行数：
.text-container {
display: -webkit-box;
-webkit-line-clamp: 2; /* 设置显示行数为2 */
-webkit-box-orient: vertical;
overflow: hidden;
}
-webkit-line-clamp 属性限制文本显示行数，配合 display: -webkit-box 和 -webkit-box-orient: vertical 实现文本截断。
JavaScript动态判断及展开
接下来，使用JavaScript判断文本是否超出指定行数。如果超出，则添加展开箭头，并绑定点击事件实现展开功能：
const textContainer = document.querySelector('.text-container');
const textHeight = textContainer.scrollHeight;
const lineHeight = parseInt(window.getComputedStyle(textContainer).lineHeight);
const maxLines = 2;
const maxHeight = maxLines * lineHeight;
if (textHeight > maxHeight) {
const expandIcon = document.createElement('span');
expandIcon.textContent = '展开';
expandIcon.classList.add('expand-icon');
textContainer.parentNode.insertBefore(expandIcon, textContainer.nextSibling);
expandIcon.addEventListener('click', () => {
textContainer.style.webkitLineClamp = 'unset';
textContainer.style.overflow = 'visible';
expandIcon.style.display = 'none';
});
}
这段代码获取文本高度，并与最大高度比较。如果超出，则创建一个“展开”箭头，并添加点击事件。点击后，移除CSS限制，显示完整文本，并隐藏箭头。
完整示例 (需结合HTML)
假设你的HTML结构如下：
<div class="text-container"> <p>这是一段较长的文本，用于测试多行文本溢出效果。这是一段较长的文本，用于测试多行文本溢出效果。这是一段较长的文本，用于测试多行文本溢出效果。</p> </div>
将上述CSS和JavaScript代码添加到你的页面中，即可实现预期效果。 记得将JavaScript代码放在<script></script>标签内，并确保在DOM加载完成后执行。
通过这种方法，可以简洁高效地实现多行文本的自动展开和收起功能，提升用户体验。 你可以根据实际需求调整显示行数(-webkit-line-clamp)和样式。
