text-overflow: ellipsis 与 text-align 冲突时无法直接居中，因 nowrap 下文本被视为单行长单词，text-align 失效；需改用 display: flex + justify-content: center，并在子元素上加 min-width: 0，同时保留 width/max-width、overflow: hidden、white-space: nowrap、text-overflow: ellipsis 四要素。
text-overflow: ellipsis 与 text-align 冲突时怎么居中
直接加 text-align: center 是无效的——text-overflow: ellipsis 要求 white-space: nowrap，而 nowrap 下文本被当作一个不可分割的“长单词”，text-align 只对换行后的块内行盒起作用，此时整个文本只有一行、且超宽，浏览器会把它左对齐后裁剪，居中声明被忽略。
真正能居中的做法是换容器布局模型：
- 把容器设为
display: flex，再用justify-content: center - 子元素（文本）必须加
min-width: 0，否则 flex 会默认按内容长度撑开，导致 width 失效、溢出不触发 - 仍需保留四要素：
width（或max-width）、overflow: hidden、white-space: nowrap、text-overflow: ellipsis
示例：
.centered-ellipsis {
display: flex;
justify-content: center;
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.centered-ellipsis span {
min-width: 0; /* 关键！否则 flex 默认最小宽度为内容长度 */
}中间省略号（…）不是靠 text-align 实现的
很多人搜“居中省略号”，其实是想让省略号出现在文本中间（如 “这…文档”），而不是让整段文字在容器里水平居中。这两者完全不同。
立即学习“前端免费学习笔记（深入）”；
text-overflow: ellipsis 只支持末尾省略，**没有原生中间省略方案**。所谓“中间省略”，必须用伪元素 + 渐变遮罩模拟：
- 容器设
position: relative、overflow: hidden、white-space: nowrap - 用
::before和::after分别盖住左右两端，背景渐变从透明过渡到容器背景色 -
::after的content: "\2026"（Unicode 省略号）要放在右侧，但需transform: scaleX(-1)翻转才能正向显示 - 这个方案对字体渲染敏感，不同字号/字体下遮罩位置容易偏移，需反复调试
left/right值
Flex 容器里子元素不响应 width 怎么办
常见现象：写了 width: 150px，但文本还是铺满整行、省略号不出现。根本原因是 Flex 子项默认有 min-width: auto，它会阻止 width 生效，哪怕你写了 flex: 0 0 150px 也不一定管用。
必须显式重置：
- 子元素加
min-width: 0（最稳妥） - 或者用
flex: 0 1 150px（flex-shrink: 1允许压缩） - 避免用
flex: 1或没设flex-shrink，否则它会优先占满剩余空间
漏掉 min-width: 0 是生产环境里最常被忽略的点，尤其在 React/Vue 动态渲染的列表项中，一模一样的 CSS 在不同父容器下表现不一致，根源往往就在这儿。
表格单元格（<td>）里怎么让文本居中省略
表格单元格自带 table-cell 行为，text-align: center 本身有效，但和 text-overflow 组合时容易失效，因为 <td> 默认不设 width，且 white-space: nowrap 会破坏表格自动列宽分配逻辑。
可靠写法：
- 给
<td>加width: 120px（固定值）或max-width: 120px - 同时设
text-align: center（居中生效） - 必须加
overflow: hidden—— 表格单元格默认overflow: visible，不设就裁不掉 -
white-space: nowrap和text-overflow: ellipsis按常规配齐
注意：百分比 width 在表格中行为不稳定，尤其跨列合并时，建议统一用像素或 vw。
