如何实现单行、多行文本超长时显示省略号（...）？
单行省略号（三件套，缺一不可）
.ellipsis {
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis; /* 省略号 */
width: 200px; /* 必须有宽度限制 */
}多行省略号（WebKit 方案，-webkit-line-clamp）
.clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 最多显示 2 行 */
overflow: hidden;
}注意：
-webkit-line-clamp依赖-webkit-box，现代浏览器（Chrome/Edge/Safari）普遍支持，Firefox 较新版本也已支持。
常见误区
- 忘记设
width或max-width：弹性布局里元素可能被内容撑开，省略号不触发。 - 父级
display: flex时，子项要加min-width: 0才能让省略号生效（flex 子项默认min-width: auto不收缩）。