文本超出两行自动展开，下箭头超酷技巧

本文介绍一种实现文本超出两行自动展开并显示下箭头的技巧。通过CSS的`-webkit-line-clamp`属性限制文本显示行数，并结合`overflow:hidden`隐藏溢出文本，同时利用伪元素::after显示下箭头。JavaScript代码则动态检测文本是否溢出，控制箭头的显示和隐藏，以及文本的展开和收起状态，并通过`scrollHeight`和`clientHeight`精确判断溢出情况。最终实现点击箭头即可展开或收起多行文本的交互效果，提升用户体验。 该方法简洁高效，并附带完整CSS和JavaScript代码示例，方便开发者快速应用。

实现文本超出两行自动展开并显示下箭头的方案：

本文提供一种方法，让文本超出两行时自动展开并显示下箭头图标，点击箭头可收起或展开文本。

步骤一：CSS样式控制文本显示行数及溢出

首先，使用CSS控制文本显示行数，并设置溢出文本隐藏。 关键在于-webkit-line-clamp属性，以及overflow属性。 同时，我们添加一个伪元素::after来显示下箭头。

.text-container {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 设置最大显示行数为2 */
  -webkit-box-orient: vertical;
  overflow: hidden; /* 隐藏溢出文本 */
  position: relative; /* 为伪元素定位做准备 */
}

.text-container::after {
  content: "↓";
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: pointer;
  display: none; /* 默认隐藏箭头 */
}

.text-container.expanded {
  -webkit-line-clamp: unset; /* 展开时取消行数限制 */
  overflow: visible; /* 显示所有文本 */
}

.text-container.expanded::after {
  content: "↑"; /* 展开后箭头向上 */
}

步骤二：JavaScript控制展开和收起

JavaScript代码负责检测文本是否超出两行，并根据需要显示或隐藏箭头，以及控制文本的展开和收起状态。

const textContainers = document.querySelectorAll('.text-container');

textContainers.forEach(container => {
  const textElement = container.querySelector('.text'); //  假设文本内容在.text类元素中
  const arrowElement = container.querySelector('::after');

  //  检测文本是否超出两行 (更精确的判断)
  const isOverflow = textElement.scrollHeight > container.clientHeight;

  if (isOverflow) {
    container.classList.add('show-arrow'); // 添加类名显示箭头
  }

  arrowElement.addEventListener('click', () => {
    container.classList.toggle('expanded');
    if (container.classList.contains('expanded')) {
      arrowElement.textContent = "↑";
    } else {
      arrowElement.textContent = "↓";
    }
  });
});

步骤三：HTML结构

你的HTML结构应该包含一个带有.text-container类的容器，以及一个带有.text类的文本元素。

  
这是一段文本，它可能会超出两行。如果超出两行，则会显示一个下箭头，点击箭头可以展开或收起文本。

改进说明:

• 使用scrollHeight和clientHeight进行更精确的溢出判断，避免了之前代码中粗略估算单行高度的不足。
• 添加了show-arrow类名，只在需要时显示箭头，避免了不必要的箭头显示。
• 在展开和收起时动态改变箭头方向 (↑/↓)。
• 代码更清晰，可读性更强。

记住将CSS代码添加到你的标签或单独的CSS文件中，并将JavaScript代码添加到标签中，或者一个单独的JS文件中，并确保在DOM加载完成后执行。 这个改进后的方法更加可靠和健壮。

到这里，我们也就讲完了《文本超出两行自动展开，下箭头超酷技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！