CSS中设置( 单行、多行 )超出显示省略号

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

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

在CSS中，可以使用text-overflow属性来设置超出容器部分显示为省略号。对于单行文本，可以使用white-space和overflow属性来实现。对于多行文本，可以使用display属性和-webkit-line-clamp属性来实现。

单行文本省略号显示：




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

多行文本省略号显示：




.multi-line-ellipsis {
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-box-orient: vertical; /* 垂直排列子元素 */
  -webkit-line-clamp: 3; /* 限制在3行内 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

注意：-webkit-line-clamp属性是一个不是标准的属性，它仅在基于WebKit内核的浏览器中有效，比如Chrome、Safari等，但是并不在所有浏览器中被支持。

CSS中设置( 单行、多行 )超出显示省略号

评论已关闭

推荐阅读