CSS+JS轻松实现多行文本展开收起效果

2023-04-21 13:55:25

轻松实现多行文本展开收起功能：CSS+JS秘籍大公开！

在现代网页设计中，展示大量信息时，控制文本的可见性至关重要。多行文本的展开收起功能可以帮助用户轻松阅读和理解关键内容，同时保持页面简洁。本文将深入探讨如何使用CSS和JavaScript轻松实现这一效果。

HTML准备

第一步是准备HTML结构。创建一个容器元素来包含文本，以及一个按钮元素来触发文本的展开和收起。

<div class="container">
  <p id="text">
    这里放置你要展示的文本内容。
  </p>
  <button id="toggle-button">
    展开/收起
  </button>
</div>

CSS设置

接下来，使用CSS设置文本的样式。设置line-height属性以确定行高，并使用overflow: hidden;隐藏超出容器高度的部分。此外，使用-webkit-line-clamp:属性设置初始显示的行数。

.container {
  width: 500px;
  margin: 0 auto;
}

#text {
  line-height: 1.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 3;
}

#toggle-button {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #eee;
  border: 1px solid #ccc;
  cursor: pointer;
}

JS实现

最后，使用JavaScript实现按钮的点击事件。当点击按钮时，动态切换文本的显示状态。

const text = document.getElementById('text');
const toggleButton = document.getElementById('toggle-button');

toggleButton.addEventListener('click', () => {
  if (text.classList.contains('expanded')) {
    text.classList.remove('expanded');
    toggleButton.textContent = '展开';
  } else {
    text.classList.add('expanded');
    toggleButton.textContent = '收起';
  }
});

示例代码

完整代码如下：

<!DOCTYPE html>
<html>
<head>
  
  <style>
    .container {
      width: 500px;
      margin: 0 auto;
    }

    #text {
      line-height: 1.5em;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      -webkit-line-clamp: 3;
    }

    #toggle-button {
      margin-top: 10px;
      padding: 5px 10px;
      background-color: #eee;
      border: 1px solid #ccc;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="container">
    <p id="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor vel mi consectetur posuere. Cras eu arcu tempus, commodo quam vitae, pretium enim. Quisque eu dui eu risus tincidunt molestie. Maecenas et placerat tellus, in vehicula mi. Fusce eget dapibus augue. Maecenas bibendum ut orci vitae aliquet. Ut venenatis gravida blandit. Donec laoreet, quam eget ultrices placerat, tortor tellus rutrum risus, eu lobortis arcu sapien at odio. Mauris ullamcorper id nisi id finibus. Integer vehicula purus ac lacus mollis gravida. Aenean aliquam purus eu luctus pharetra. Donec vehicula ligula eget maximus aliquam.
    </p>
    <button id="toggle-button">
      展开/收起
    </button>
  </div>

  <script>
    const text = document.getElementById('text');
    const toggleButton = document.getElementById('toggle-button');

    toggleButton.addEventListener('click', () => {
      if (text.classList.contains('expanded')) {
        text.classList.remove('expanded');
        toggleButton.textContent = '展开';
      } else {
        text.classList.add('expanded');
        toggleButton.textContent = '收起';
      }
    });
  </script>
</body>
</html>