在网页设计中，为了提供更好的用户体验和优化页面布局，实现多行文本的展开收起效果是一项常见且实用的需求。以下将详细介绍在 CSS 中实现多行文本展开收起效果的方法。

我们需要使用 HTML 结构来构建文本内容。可以使用一个容器元素，比如<div>，来包裹要展开收起的文本。

<div class="text-container">
  这里是多行的文本内容，可能会很长。
  这是更多的文本，用于展示展开效果。
  ......
</div>

接下来，在 CSS 中，我们可以通过设置overflow属性来控制文本的显示方式。初始时，将overflow设置为hidden，以隐藏超出容器高度的文本。

.text-container {
  overflow: hidden;
  height: 50px;  /* 设定一个初始的固定高度，显示部分文本 */
  line-height: 20px;  /* 行高根据实际情况设置 */
}

然后，为了实现展开收起的交互效果，我们可以使用 JavaScript 来监听用户的点击事件。当用户点击时，切换容器的高度属性，从而实现文本的展开或收起。

const container = document.querySelector('.text-container');
container.addEventListener('click', function() {
  if (container.style.height === '50px') {
    container.style.height = 'auto';  // 展开
  } else {
    container.style.height = '50px';  // 收起
  }
});

另外，为了使展开收起效果更加美观，可以添加一些过渡效果。在 CSS 中，使用transition属性来实现平滑的过渡。

.text-container {
  transition: height 0.3s ease;  /* 0.3 秒的平滑过渡效果 */
}

通过以上的 HTML、CSS 和 JavaScript 代码的结合，我们就能够在网页中实现多行文本的展开收起效果。这种效果不仅能够节省页面空间，还能让用户根据自己的需求查看更多或更少的文本内容。

在实际应用中，还可以根据具体的设计需求对样式进行进一步的调整和优化，比如更改展开收起的触发方式、添加动画效果等，以满足不同的用户场景和视觉要求。

通过合理运用 CSS 和 JavaScript 的相关技术，我们能够轻松地为网页中的多行文本添加灵活且实用的展开收起功能，提升用户体验和页面的交互性。