text-overflow: ellipsis 必须配合 overflow: hidden 才生效，且需 white-space: nowrap（单行）或特定多行方案；width 必须明确，否则裁剪失效；多行省略需 -webkit-line-clamp 或 JS 实现。
text-overflow: ellipsis 必须配合 overflow: hidden 才生效
单独设置 text-overflow: ellipsis 不会显示省略号，浏览器直接忽略该声明。它只是一个“溢出时怎么截断”的策略，真正触发截断行为的是 overflow 的裁剪机制。
必须同时满足三个条件：
-
white-space: nowrap（单行文本）或white-space: normal+width+height+overflow: hidden（多行需额外处理） -
overflow: hidden（关键！overflow: visible或auto都不行） text-overflow: ellipsis
单行文字溢出用 nowrap + overflow: hidden 最可靠
这是最常见也最稳定的组合，适用于按钮文字、表格表头、导航栏标题等固定高度的单行场景。
.truncate-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}注意：width 必须有明确值（像素、百分比、max-content 等），否则 overflow: hidden 无裁剪边界，ellipsis 不触发。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 父容器没设
width，子元素用100%但父级宽度由内容撑开 → 实际无裁剪 - 用了
display: flex但没加min-width: 0，导致子项不收缩 →overflow: hidden失效
多行文字溢出不能只靠 text-overflow
text-overflow: ellipsis 原生只支持单行。想实现两行或三行省略，必须绕过标准属性，用 WebKit 私有方案或 JS 补位。
纯 CSS 方案（仅 Chrome/Safari/Firefox 119+）：
.truncate-2lines {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/* 注意：不能写 text-overflow: ellipsis */
}这个方案的问题：
- Firefox 旧版本不支持
-webkit-line-clamp - 无法和
text-align: justify兼容 - 换行符（
\n）可能被忽略，需配合white-space: pre-line
overflow: hidden 会隐藏所有溢出内容，包括阴影、伪元素和绝对定位子元素
一旦加了 overflow: hidden，不仅文字被裁，::before/::after 超出部分、box-shadow、甚至 position: absolute 的子节点都会被剪掉。
如果需要保留阴影或图标，可考虑：
- 把
overflow: hidden移到更外层容器，让文字容器本身不裁剪 - 用
mask-image或clip-path替代overflow（兼容性稍差） - 对绝对定位元素加
transform: translateZ(0)强制提升图层，有时能突破裁剪（不稳定）
实际项目中，经常要反复确认「到底是谁在裁剪」——可能是祖先元素某处悄悄加了 overflow: hidden，导致 ellipsis 看似失效，其实根本没走到那一步。
