怎么通过HTML的CSS text-overflow: ellipsis实现溢出文字显示省略号-html教程-PHP中文网

text-overflow: ellipsis 失效的根本原因有三：未设 white-space: nowrap、overflow 不为 hidden、容器无明确 width 或 max-width；Flex 中还需加 min-width: 0 才能生效。

怎么通过html的css text-overflow: ellipsis实现溢出文字显示省略号

text-overflow: ellipsis 为什么没反应

它不是“加了就生效”的装饰属性，而是个开关——只有当文本真正在单行内被物理截断时，才会亮起。常见失效根本原因就三个：white-space: nowrap漏了、overflow不是hidden、容器没设width或max-width（哪怕写了flex: 1也不算）。浏览器遇到任一缺失，直接忽略text-overflow: ellipsis声明。

单行省略号必须配齐的四条 CSS 规则

缺一不可，顺序无关，但必须共存：

width 或 max-width：必须是明确值（如200px、80%），flex-basis或flex: 1不触发截断
overflow: hidden：不能是visible（默认）、auto（滚动计算不稳定）或scroll（会显示滚动条）
white-space: nowrap：这是最常被跳过的一步；normal、pre-wrap下它完全不工作
text-overflow: ellipsis：此时才真正启用

示例写法：

.ellipsis {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Flex 容器里 text-overflow 失效怎么办

Flex 子项默认min-width: auto，会撑开自身宽度去容纳全部文字，导致overflow: hidden形同虚设。解决方法只有一条：min-width: 0。

完整组合如下：

.flex-item {
  min-width: 0;           /* 关键！覆盖 flex 默认的 min-width: auto */
  width: 0;               /* 可选，配合 flex-grow 更稳 */
  flex: 1;                /* 允许伸缩 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

注意：table-cell布局也类似，需额外加table-layout: fixed才能约束列宽。