文本溢出体验进阶：CSS 技巧实现单行/多行隐藏展示以及实际场景应用，确保内容可读性和布局整洁性

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

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

/* 单行文本溢出隐藏，显示省略号 */
.single-line-ellipsis {
  white-space: nowrap; /* 保证文本在一行内显示 */
  overflow: hidden; /* 隐藏溢出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}

/* 多行文本溢出隐藏，显示省略号 */
.multi-line-ellipsis {
  overflow: hidden; /* 隐藏溢出的内容 */
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-box-orient: vertical; /* 垂直排列子元素 */
  -webkit-line-clamp: 3; /* 限制在三行内 */
  line-height: 1.5em; /* 设置行高 */
  max-height: 4.5em; /* 最大高度为3行*行高 */
  text-overflow: ellipsis; /* 多行时显示省略号 */
}

/* 实际应用场景中，可以根据需要调整行高和最大高度 */

这段代码提供了单行和多行文本溢出隐藏的实现方法，并考虑了兼容性问题。在实际应用中，可以将对应的类应用到需要实现文本溢出隐藏的元素上。

文本溢出体验进阶：CSS 技巧实现单行/多行隐藏展示以及实际场景应用，确保内容可读性和布局整洁性

评论已关闭

推荐阅读