text-overflow: ellipsis生效必须同时满足三个条件：容器有明确宽度（width或max-width）、white-space: nowrap、overflow: hidden；缺一不可，否则文本换行、撑开容器或完全无反应。
text-overflow: ellipsis 要生效，必须同时满足三个条件：容器有明确宽度、white-space: nowrap、overflow: hidden。缺一不可，否则省略号根本不会出现。
为什么 text-overflow: ellipsis 不显示？
最常见原因就是漏掉某个前提：
-
white-space: nowrap缺失：文本自动换行，压根没机会“溢出”，ellipsis完全不介入 -
overflow: hidden缺失：即使内容超出，也会直接撑开或溢出容器，浏览器不执行裁剪逻辑 - 容器没设
width或max-width：块级元素默认width: auto，会无限扩展容纳内容 - 对
<span></span>等内联元素直接用：它不响应width，得先加display: inline-block或display: block
white-space: nowrap 的真实作用是什么？
它不是“让文字变短”，而是“让溢出可被检测”——强制所有字符挤在一行，是触发 text-overflow 的开关。它和 overflow: hidden 是一对搭档：前者制造“潜在溢出”，后者执行“实际裁剪”。没有 nowrap，哪怕容器只有 50px 宽，文本也会折行，ellipsis 完全静默。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
注意：white-space: nowrap 会影响整个元素内的空格、换行符行为；如果内容里有
<br>或预格式化文本，它们会被忽略。
用 max-width 还是 width？
max-width 更安全：
- 固定
width: 200px在移动端容易撑破布局 - 推荐优先用
max-width，尤其配合 flex 或 grid 布局（如flex: 1; min-width: 0;） - 某些 CSS 重置库（如 normalize.css）可能覆盖了
white-space默认值，调试时务必检查 computed 样式里是否确实是nowrap
真正容易被忽略的是：当父容器本身宽度不确定（比如未设 min-width: 0 的 flex 项），子元素即使写了 max-width: 100%，也可能因 flex 默认最小宽度为内容长度而无法收缩，导致 ellipsis 失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
