CSS 实现多行文本“展开收起”

CSS 可以通过结合 `display`、`height`、`overflow` 和 `:hover` 或者媒体查询 (`@media`) 来实现文本内容的“展开收起”效果。下面是一个简单的例子：

1. **基础实现** (仅使用鼠标悬停)：

   .collapsible {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.5s ease-in-out; /* 添加过渡效果 */
   }
   
   .collapsible:hover {
     max-height: 200px; /* 设置文本的最大高度，这里假设是200像素 */
   }

这里 `.collapsible` 类的元素默认隐藏内容，当鼠标悬停时，`max-height` 属性会改变，显示部分内容。

2. **添加点击触发** (JavaScript配合):
如果你想通过点击按钮来控制文本内容的显示和隐藏，可以使用 JavaScript 与 CSS 结合。例如：

   <button onclick="toggleContent()">点击查看</button>
   <div id="content" class="collapsible">
     长篇文本...
   </div>

   <script>
   function toggleContent() {
     var content = document.getElementById('content');
     if (content.offsetHeight === 0) {
       content.style.maxHeight = '200px';
     } else {
       content.style.maxHeight = '0';
     }
   }
   </script>

当点击按钮时，会调用 `toggleContent()` 函数来切换 `#content` 的 `max-height`。