用CSS让文字折叠展开！一句话搞定！

2023-09-28 21:56:47

一图胜千言~~王者荣耀微信区百里守约请求出栈~~

缘起是因8月初做的需求，其中里面涉及到了文字的点击展开效果，看起来很简单，但因为要兼容ie所以做起来可真的费点劲~，现要求超出两行有省略和展示文字。

本篇文章将讲解如何使用CSS来实现文字折叠展开的效果，让你的文本在需要时显示完整内容，不需要时折叠隐藏多余内容，同时兼顾不同浏览器的兼容性，告别繁琐的代码和插件依赖。

CSS实现文字折叠展开效果的原理

CSS实现文字折叠展开效果的原理非常简单，就是利用display属性来控制文本的显示状态。当display属性设置为block时，文本将正常显示；当display属性设置为none时，文本将被隐藏。

.text-container {
  display: block;
}

.text-container.hidden {
  display: none;
}

CSS实现文字折叠展开效果的步骤

首先，你需要创建一个用来放置文本的容器元素。这个容器元素可以是<div>元素、<span>元素，也可以是其他任何你想用的元素。
然后，你需要给这个容器元素添加一个display: block;的样式，以确保文本能够正常显示。
接下来的步骤是创建按钮或链接，用于触发文本的折叠和展开。当你点击按钮或链接时，它将执行一个JavaScript函数，该函数将切换容器元素的display属性，从而实现文本的折叠和展开。
以下是一个简单的HTML代码示例，演示如何使用CSS和JavaScript来实现文字折叠展开效果：

<div id="text-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Cras ullamcorper massa sit amet lacus luctus, at ullamcorper nisl tincidunt. Maecenas egestas arcu quis arcu tempor, eget hendrerit ligula pulvinar. Sed euismod orci eget lacus consectetur, eget hendrerit massa aliquet. Donec in pulvinar turpis. Aliquam erat volutpat. Maecenas ultrices placerat lacus, eu hendrerit leo tincidunt eget. Maecenas pharetra risus at leo placerat, at aliquam nisl efficitur.</p>
</div>

<button id="toggle-button">Toggle Text</button>

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

  toggleButton.addEventListener('click', () => {
    if (textContainer.style.display === 'none') {
      textContainer.style.display = 'block';
    } else {
      textContainer.style.display = 'none';
    }
  });
</script>