CSS实现展示N行文字超出用省略号代替

原创已于 2022-12-08 09:13:37 修改 · 197 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-12-08 09:01:48 首次发布

4 篇文章

订阅专栏

本文介绍了一种CSS样式设置方法，用于控制文本在容器内的显示方式，当文本长度超过容器宽度时，通过隐藏溢出部分并使用省略号来替代，同时限制了文本的行数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单行文本，超出用省略号代替

.txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行文本，超出用省略号代替

.txt {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}