html 点击展开更多和收起

你可以通过 HTML 和 JavaScript 实现点击展开更多和收起的效果。一种常见的实现方式是使用 `<div>` 元素和 CSS 样式来控制文本的显示和隐藏，结合 JavaScript 来实现点击事件。

下面是一个简单的示例代码，其中文本内容默认显示 3 行，点击按钮可以展开全部内容或收起部分内容：

<style>
  .content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 显示 3 行 */
    -webkit-box-orient: vertical;
  }
  .btn {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
  }
</style>

<div class="content">
  这是一段比较长的文本内容，可能会超出默认显示的行数。这是一段比较长的文本内容，可能会超出默认显示的行数。这是一段比较长的文本内容，可能会超出默认显示的行数。这是一段比较长的文本内容，可能会超出默认显示的行数。
</div>
<div class="btn" onclick="toggle()">展开更多</div>

<script>
  function toggle() {
    var content = document.querySelector('.content');
    var btn = document.querySelector('.btn');
    if (content.classList.contains('expanded')) { // 当前是展开状态
      content.classList.remove('expanded');
      btn.textContent = '展开更多';
    } else { // 当前是收起状态
      content.classList.add('expanded');
      btn.textContent = '收起';
    }
  }
</script>

在上面的代码中，我们使用 CSS 样式控制 `.content` 元素的显示和隐藏，并且使用 JavaScript 来切换展开和收起状态。点击 `.btn` 元素时，调用 `toggle()` 函数来切换状态，并且修改按钮的文本内容。同时，我们可以通过 CSS 样式来控制展开状态和收起状态的样式。

注意：上面的代码示例只是一个简单的实现方式，具体的实现方法可能会根据实际情况有所不同。