多行文本溢出如何用展开箭头代替省略号并实现自动展开？

<code class="css">.text-container {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 设置显示行数为2 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}</code>

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

<code class="html"><div class="text-container">
  <p>这是一段较长的文本，用于测试多行文本溢出效果。这是一段较长的文本，用于测试多行文本溢出效果。这是一段较长的文本，用于测试多行文本溢出效果。</p>
</div></code>