文本超出两行如何自动展开并显示下箭头？

<code class="css">.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: "↑"; /* 展开后箭头向上 */
}</code>

<code class="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 = "↓";
    }
  });
});</code>

<code class="html"><div class="text-container">
  <p class="text">这是一段文本，它可能会超出两行。如果超出两行，则会显示一个下箭头，点击箭头可以展开或收起文本。</p>
</div></code>