text-overflow: ellipsis 本身不生效，是因为它必须与 white-space: nowrap、overflow: hidden 和明确的 width 或 max-width 三者共存才触发；缺一即被浏览器静默忽略，且在 flex/grid 中还需额外加 min-width: 0 才能生效。
text-overflow: ellipsis 本身不生效，是因为它从来不是“独立属性”——它必须和 white-space: nowrap、overflow: hidden、以及明确的宽度约束一起用，缺一不可。
为什么 text-overflow: ellipsis 没反应？
最常见的情况是只写了这一条样式，其他三个条件没凑齐。浏览器会直接忽略 text-overflow，因为没有溢出触发机制。
-
white-space: nowrap缺失 → 文本自动换行，根本不会水平溢出 -
overflow: hidden缺失 → 溢出内容照常显示，没有裁剪区域，ellipsis无处可落 - 没设
width或max-width→ 元素按内容撑开，压根不“溢出”
text-overflow 在 Flex/Grid 容器里失效怎么办？
Flex 项默认有 min-width: auto，会阻止收缩，导致即使写了 width: 100% 也无效。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 给子元素加
min-width: 0（Flex 场景下几乎必加） - 避免用
flex: 1同时又没限制父容器宽度 —— 父容器得有明确尺寸或max-width - Grid 中类似，需确保轨道尺寸固定或受控，比如
grid-template-columns: 1fr minmax(0, 1fr))
多行文本想用省略号，text-overflow 不行怎么办？
text-overflow 只对单行有效。多行截断得靠 WebKit 私有方案：-webkit-line-clamp。
- 必须配合
display: -webkit-box和-webkit-box-orient: vertical -
overflow: hidden仍需保留 - 注意：Firefox 不支持
-webkit-line-clamp，Safari 17+ 才开始稳定支持，IE 完全不认 - 替代方案如 JS 截断或
line-clampCSS 新标准（2026 年仍属实验性，display: block+line-clamp: 3尚未广泛可用）
Chrome 149+ 中省略号在编辑时闪烁，怎么稳住？
这是 Chrome 的已知行为：当元素获得焦点或光标移动时，text-overflow: ellipsis 会临时退化为 clip，导致省略号消失又恢复。
- 这不是 bug，是渲染优化策略，但影响可编辑场景（如
contenteditable或input[type="text"]旁的 label） - 无法通过 CSS 关闭，只能回避：对可编辑区域不用
text-overflow，改用 JS 动态截断 + tooltip 提示完整文本 - 若必须用，加
pointer-events: none可阻止焦点进入，但会牺牲交互性
真正容易被忽略的，不是“怎么写”，而是“谁在控制宽度”——父容器是否 flex/grow、是否设置了 min-width、是否用了 fit-content，这些都会悄悄破坏宽度约束，让整个组合失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
