css超过3行显示为...并且可以展开

/* CSS代码用于限制文本显示为3行，并提供展开功能 */

/* 定义容器样式 */
.text-container {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制文本显示为3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 定义展开按钮样式 */
.toggle-button {
  cursor: pointer;
  color: blue;
  text-decoration: underline;
}

/* 展开后的样式 */
.expanded {
  max-height: none;
  -webkit-line-clamp: unset;
}

<!-- HTML结构 -->
<div class="text-container" id="text">
  这是一段很长的文本，超过三行后会显示为省略号。这是一段很长的文本，超过三行后会显示为省略号。这是一段很长的文本，超过三行后会显示为省略号。这是一段很长的文本，超过三行后会显示为省略号。
</div>
<div class="toggle-button" onclick="toggleText()">展开</div>

<script>
  // JavaScript代码用于切换文本的展开和收起状态
  function toggleText() {
    const textContainer = document.getElementById('text');
    const button = document.querySelector('.toggle-button');

    if (textContainer.classList.contains('expanded')) {
      textContainer.classList.remove('expanded');
      button.textContent = '展开';
    } else {
      textContainer.classList.add('expanded');
      button.textContent = '收起';
    }
  }
</script>

解释说明：

1. CSS部分:

   • .text-container 类用于限制文本显示为3行，并在超出时显示省略号。
   • -webkit-line-clamp: 3; 是关键属性，它限制文本显示为3行。
   • .expanded 类用于移除行数限制，使文本完全显示。

2. HTML部分:

   • div 元素包含要显示的文本，并应用了 .text-container 类。
   • div 元素中的按钮用于触发展开/收起操作。

3. JavaScript部分:

   • toggleText() 函数用于切换文本的展开和收起状态，并更新按钮文本。