CSS 实现多行文本 “展开收起”

2023-09-25 07:16:07

方法一：多行文本截断，超出部分省略号

说到限制行数，超出部分省略号显示，我们常用的就是display: -webkit-box。这里就是display: -webkit-box;和-webkit-line-clamp: 3;，意思是截取当前元素的前三行，超出部分省略号显示。

当然这种方法也是有缺陷的，就是不支持文本的自动换行。即无法控制每行文本显示的字符数，固定为每行显示多少个字符。

方法二：使用display: -webkit-box配合overflow: hidden;

overflow 意思是溢出，简单讲就是超过部分隐藏。这里我们使用overflow: hidden;配合display: -webkit-box;，可以强制固定元素的前几行显示，其余的溢出隐藏，此时点击按钮后我们将overflow值改成visible，这样剩下的内容就显示出来了。

具体代码如下：

<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur ante in elit tempor, eu dapibus nisl lacinia. Donec vitae tempus felis. Nunc sit amet feugiat nibh. Nulla malesuada, ligula in tincidunt dignissim, nulla urna tempor tellus, et scelerisque sapien nisl ut erat. Proin vitae consectetur libero. Sed sit amet porttitor ligula. Fusce euismod felis ac nunc posuere, eu ornare nulla hendrerit. Morbi tincidunt lacus non lacinia consectetur. Donec sed ultricies neque, in eleifend lacus. Mauris egestas augue sed feugiat tristique. Ut ultricies nisl ac nunc vulputate viverra. Nunc id tortor faucibus, posuere urna ut, pulvinar enim.</p>
</div>

<button id="toggle-button">展开/收起</button>

#content {
  width: 500px;
  height: 100px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

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

#toggle-button:hover {
  background-color: #ddd;
}

#toggle-button.active {
  background-color: #ccc;
}

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

toggleButton.addEventListener('click', () => {
  if (content.classList.contains('active')) {
    content.classList.remove('active');
    content.style.overflow = 'hidden';
    toggleButton.textContent = '展开';
  } else {
    content.classList.add('active');
    content.style.overflow = 'visible';
    toggleButton.textContent = '收起';
  }
});