如何实现文字溢出显示省略号？

这个需求在前端开发里太常见了，不管是列表的标题、表格的单元格还是用户评论，空间不够时总不能任由文字把布局撑坏。用CSS来处理，既干净又高效。

最基础的是单行文本溢出。你需要一个CSS“组合拳”，三个属性缺一不可：

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

white-space: nowrap 让文字坚决不换行，overflow: hidden 把超出盒子的部分藏起来，最后 text-overflow: ellipsis 在藏起来的地方用“…”表示省略。记住，这个盒子（元素）必须有一个明确的宽度。

有时候一行不够，比如新闻摘要需要显示两到三行。这时候可以用 -webkit-line-clamp 属性，不过它主要得到WebKit内核浏览器（比如Chrome、Safari）较好的支持。在HTML5的移动端项目中，这个方案用得挺多。

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

它会把文本限制在指定的行数（这里是2行），超出的部分显示省略号。

实际工作中会遇到一些坑。比如，在Flex布局里，如果子元素想用单行省略，但父容器是 display: flex，你可能会发现省略号不生效。这时候通常需要给这个子元素加一个 min-width: 0 或者 overflow: hidden，来触发一个“收缩”的上下文。

.flex-parent {
  display: flex;
}
.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* 关键 */
}

另一个常见场景是在表格里。想让 <td> 里的文字溢出时显示省略号，记得给 <table> 加上 table-layout: fixed，这样列的宽度算法才会固定，省略号才能正常工作。