text-overflow: ellipsis单独无效，必须同时满足white-space: nowrap、overflow: hidden、明确宽度（width/max-width）及块级显示，flex中还需min-width: 0。
text-overflow: ellipsis 单独加没用，flex-wrap: wrap 乱设反而撑破容器——溢出不是样式没写全，而是约束条件没配齐。
为什么 text-overflow: ellipsis 加了还是不显示省略号
它只对「被裁剪的块级内容」起作用，缺任意一环都白搭：
-
white-space: nowrap必须有，否则文字自动换行，根本不会“溢出” -
overflow: hidden必须有，否则溢出内容直接流出来 - 容器必须带明确宽度约束：
width、max-width，或由flex/grid父容器提供有效限制（比如flex-basis或min-width: 0） - 在
display: flex容器里，子项默认min-width: auto，会阻止收缩——得显式加min-width: 0或overflow: hidden
flex-wrap: wrap 为什么没让导航栏换行
它不是“自动适配”，而是按规则换行：只有当所有子项总宽度 > 父容器可用宽度时才触发。常见失效场景：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父容器没设
width或max-width，实际宽度无限大 - 某个子项（如搜索框）用了
flex: 1但没控宽，把剩余空间全占了，其他项挤不下去 - 子项内部含固定宽元素（比如
input[type="search"]默认最小宽度约 120px），导致整体无法压缩到可换行尺寸 - 媒体查询里只改了
flex-direction，却忘了重置flex-wrap——nowrap是默认值，不显式写wrap就不会换
长不可折字符串（URL、token）导致溢出怎么办
这不是 ellipsis 失效，是文本本身没换行机会。浏览器默认不断开连续字母/数字串：
-
word-break: break-all可强制断字，但会把 “example.com” 拆成 “exa…”，语义断裂，慎用 -
overflow-wrap: break-word更安全：只在必要时断行，优先保单词完整 - 对 URL 类内容，建议配合
hyphens: auto（需lang属性支持）或 JS 截断 + tooltip 补全文本 - 移动端尤其要注意：
input元素默认min-width，用width: 100%+min-width: 0才能随容器缩
多行省略为什么在 Firefox 里不生效
-webkit-line-clamp 是 WebKit 专属方案，Firefox 用标准 line-clamp，但要求开启支持且不能和 flex 混用：
- Firefox 68+ 支持无前缀
line-clamp，但需父容器是块级 + 有明确高度或宽度 - 不能和
display: flex同时用——得回退到display: block或inline-block - 更稳妥的跨浏览器方案：用
max-height+line-height计算截断高度，再加伪元素::after绘制省略号 - 注意：如果内容含
img或inline-flex子元素，line-clamp行为不可靠，优先考虑 JS 方案
真正卡住人的从来不是属性名记不住，而是 width、min-width、white-space、overflow 这四者之间的依赖关系没理清——少一个，就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
