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

作者：System 时间：2024年08月15日分类：所有,css 字数：618

这篇文章距离上次修改已过446天，其中的内容可能已经有所变动。




.text-block {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 定义文本的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.5em; /* 行高1.5em的3行 */
  line-height: 1.5em;
  cursor: pointer; /* 将鼠标指针变为点击状态 */
}
 
.text-block__content {
  display: none; /* 隐藏全文内容 */
  white-space: pre-wrap; /* 保留空白符，并且文本会在容器的末尾自动换行 */
}
 
.text-block--expanded .text-block__content {
  display: block; /* 展开时显示全文内容 */
}

在这个简化版的CSS样式中，.text-block 类用于设置多行文本的样式，包括限制高度和文本溢出的处理。通过点击展开按钮，可以切换 .text-block--expanded 类，显示出全部内容。这个例子展示了如何实现内容的“展开收起”功能，并保持了代码的简洁性。

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

评论已关闭

推荐阅读