文本溢出？用展开箭头代替省略号！

本文介绍如何使用CSS和JavaScript优雅地处理多行文本溢出问题，用展开箭头代替省略号，提升用户体验。通过CSS的`-webkit-line-clamp`属性限制文本显示行数，实现文本截断；JavaScript则动态判断文本高度，若超出指定行数，则插入“展开”箭头，点击后移除CSS限制，显示完整文本并隐藏箭头。 文章提供详细代码示例，包括CSS样式和JavaScript代码，并讲解了如何将代码集成到HTML中，实现多行文本的自动展开和收起功能。 关键词：多行文本溢出，展开箭头，CSS，JavaScript，-webkit-line-clamp

巧用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结构如下：

  
这是一段较长的文本，用于测试多行文本溢出效果。这是一段较长的文本，用于测试多行文本溢出效果。这是一段较长的文本，用于测试多行文本溢出效果。

将上述CSS和JavaScript代码添加到你的页面中，即可实现预期效果。 记得将JavaScript代码放在标签内，并确保在DOM加载完成后执行。

通过这种方法，可以简洁高效地实现多行文本的自动展开和收起功能，提升用户体验。 你可以根据实际需求调整显示行数(-webkit-line-clamp)和样式。

今天关于《文本溢出？用展开箭头代替省略号！》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！