text-overflow: ellipsis需配合width/max-width、white-space: nowrap和overflow: hidden三者缺一不可；单行省略适用标题等场景，多行省略可用-webkit-line-clamp实现。
文字过长撑开容器、破坏布局，是前端常见问题。用 text-overflow: ellipsis 配合必要样式，就能优雅截断并显示省略号，但必须满足几个前提条件，否则无效。
基础写法：三步缺一不可
仅写 text-overflow: ellipsis 是没用的，它必须和另外两个声明一起用：
- width 或 max-width：容器得有明确宽度（百分比、px、rem 都行）
- white-space: nowrap：强制单行不换行，否则文字会折行，省略号不会触发
- overflow: hidden：隐藏溢出部分，省略号才“有地方显示”
单行省略：最常用场景
适用于标题、标签、列表项等需要严格单行展示的地方：
.title {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}注意：如果父容器是 flex 或 grid 布局，默认可能不收缩，记得给该元素加 flex-shrink: 0 或设置 min-width: 0 防止 flex 项强行撑宽。
立即学习“前端免费学习笔记（深入）”；
多行省略：CSS 原生支持有限，需技巧
CSS 没有直接的 line-clamp 多行省略属性（除了 WebKit 内核的 -webkit-line-clamp），但现代浏览器已普遍支持：
.desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 显示2行 */
overflow: hidden;
line-height: 1.5;
height: 3em; /* 2行 × 行高，辅助保险 */
}⚠️ 注意：-webkit-line-clamp 是非标准属性，但兼容性足够好（Chrome、Safari、Edge、Firefox 73+ 都支持）。若需极致兼容，可用 JS 方案或伪元素模拟，但日常项目中这个写法够用。
其他实用细节
省略号不是万能的，有些情况要小心处理：
- 中文标点（如句号、逗号）可能被截在末尾，视觉上不自然——可配合
word-break: keep-all或overflow-wrap: break-word微调断行逻辑 - 省略号颜色默认跟随文字色，无需额外设置；如需自定义（比如灰色省略号），目前只能靠 JS 插入或伪元素模拟
- 按钮内文字过长？优先考虑响应式缩放字体（
clamp()）或改用 tooltip 提示全文，别硬截
基本上就这些。核心就三点：定宽、单行、隐藏溢出。记牢条件，再复杂的布局也能稳住文字边界。
