如果文本的最大行超过4行，如何显示阅读更多的文本？

.text-box {
  height: 4em; /* 4行高度 */
  overflow: hidden;
}

<div class="text-box">
  <!-- 文本内容 -->
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet accumsan lectus. Donec fringilla quam vel dolor luctus, eget suscipit erat ultrices.
  <!-- 添加阅读更多链接 -->
  <a href="#" onclick="showMore(event)">阅读更多</a>
</div>

function showMore(event) {
  event.preventDefault();
  var textBox = event.target.parentElement;
  if (textBox.classList.contains("expanded")) {
    textBox.classList.remove("expanded");
    event.target.textContent = "阅读更多";
  } else {
    textBox.classList.add("expanded");
    event.target.textContent = "收起";
  }
}

.text-box {
  height: 4em; /* 4行高度 */
  overflow: hidden;
  transition: height 0.3s ease; /* 添加过渡效果 */
}

.text-box.expanded {
  height: auto; /* 展开文本框 */
}