如何在点击按钮时切换文本溢出？

<button id="toggleBtn">切换文本溢出</button>
<div id="textContainer">
  <p>这是一段需要切换溢出的文本。当文本内容超过容器的宽度时，可以通过点击按钮来切换显示方式。</p>
</div>

#textContainer {
  width: 200px; /* 设置文本容器的宽度 */
  height: 100px; /* 设置文本容器的高度 */
  overflow: hidden; /* 溢出内容隐藏 */
  border: 1px solid #ccc; /* 可选：添加边框以更好地显示容器 */
}

var btn = document.getElementById("toggleBtn");
var container = document.getElementById("textContainer");

btn.addEventListener("click", function() {
  container.classList.toggle("toggleOverflow"); // 切换样式类
});

.toggleOverflow {
  overflow: visible; /* 可见溢出内容 */
  white-space: normal; /* 不折行显示文本 */
}