怎么实现文字在一行内显示，超过字数用...代替？

解答思路

单行文本省略号效果可以用三条 CSS 属性组合实现：隐藏溢出内容、禁止换行、用省略号替代溢出部分。

示例代码

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

详细说明

• overflow: hidden：超出容器宽度的内容直接隐藏。
• white-space: nowrap：强制文本不换行，保证内容始终在一行显示。
• text-overflow: ellipsis：对于因 overflow: hidden 而被裁剪的文本，用省略号 ... 代替。

三者需要配合使用才能生效，且元素本身通常还需要设置固定宽度（或 max-width）才能让溢出判断成立。

小结

单行文本溢出省略号是前端非常高频的样式需求，overflow: hidden + white-space: nowrap + text-overflow: ellipsis 三件套即可解决，多行省略则需要额外的 -webkit-line-clamp 等方案。