CSS 纯代码实现自动展开更多文本的交互

2024-02-20 08:00:36

当文本较多时（超出5行），出现“全文”链接，说明有更多的内容，点了之后跳转新页面。纯 CSS 如何实现这样一个交互呢？

1. HTML 结构

首先，我们需要创建一个简单的 HTML 结构，包括一个包含文本的 <div> 元素和一个触发展开更多文本的 <a> 元素。

<div class="text-container">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc tincidunt laoreet.
    Nunc eget lacus eget nunc tincidunt laoreet. Maecenas eget lacus eget nunc tincidunt laoreet.
    Nunc eget lacus eget nunc tincidunt laoreet. Maecenas eget lacus eget nunc tincidunt laoreet.
    Nunc eget lacus eget nunc tincidunt laoreet. Maecenas eget lacus eget nunc tincidunt laoreet.
    Nunc eget lacus eget nunc tincidunt laoreet. Maecenas eget lacus eget nunc tincidunt laoreet.
  </p>
</div>

<a href="#" class="more-link">全文</a>

2. CSS 样式

接下来，我们需要使用 CSS 来控制文本的显示和展开效果。首先，我们需要将文本容器的溢出属性设置为 hidden，以隐藏多余的文本。

.text-container {
  overflow: hidden;
}

然后，我们需要将展开更多文本链接的样式设置为 display: none，使其默认隐藏。

.more-link {
  display: none;
}

最后，我们需要使用媒体查询来检测文本容器的高度是否超过了某个阈值。如果超过了阈值，则显示展开更多文本链接。

@media (max-height: 200px) {
  .more-link {
    display: block;
  }
}

3. JavaScript 代码

最后，我们需要使用 JavaScript 代码来实现展开更多文本的功能。当用户点击展开更多文本链接时，我们需要将文本容器的溢出属性改为 visible，以显示所有文本。

document.querySelector('.more-link').addEventListener('click', function() {
  document.querySelector('.text-container').style.overflow = 'visible';
});