跳到主要内容

CSS 文本超出显示省略号

文本溢出显示省略号是常见的场景，在此不考虑 JS 处理，只用 CSS 处理。

单行文本溢出显示省略号​

div {
  width: 20px;
  /* 限制内容溢出 */
  overflow: hidden;
  /* 显示省略号 */
  text-overflow: ellipsis;
  /* 文本不换行 */
  white-space: nowrap;
}

多行文本溢出显示省略号​

div {
  width: 20px;
  /* display 设置为-webkit-box 或者-webkit-inline-box */
  display: -webkit-box;
  /* -webkit-box-orient 必须设置为vertical */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* 限制内容溢出*/
  overflow: hidden;
}
  • 多行文本溢出显示省略号的方法可能存在兼容性问题，具体请查看 MDN 文档。