CSS 文字超出容器怎么显示省略号？

Question

CSS 文字超出容器怎么显示省略号？

仓乃文 · Accepted Answer

当容器宽度固定时文字溢出会影响布局，单行省略只需三个 CSS 属性配合即可实现，其中 overflow: hidden 是前提条件。

单行省略：
```css
.text {
  overflow: hidden;        /* 必须：隐藏溢出内容 */
  text-overflow: ellipsis;  /* 省略号 */
  white-space: nowrap;     /* 禁止换行 */
}
```

多行省略（2 行为例），需要 WebKit 内核浏览器支持：
```css
.text {
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* 最多显示 2 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
```

补充说明：
- 单行省略兼容性最好，所有现代浏览器都支持
- 多行省略在 Firefox 上不支持，如需兼容可使用 JS 方案
- text-overflow 只有在 overflow: hidden 和 white-space: nowrap 配合下才能生效