button元素直接加text-overflow: ellipsis无效，因其默认display: inline-block且受ua样式强干预，未设width/max-width、white-space: nowrap、overflow: hidden三者任一缺失均导致截断逻辑不触发；flex中还需加min-width: 0。
button元素直接加text-overflow: ellipsis为什么无效
因为button默认是display: inline-block，但它的内部盒模型行为受用户代理样式（UA style）强干预——多数浏览器会忽略你对white-space和overflow的设置，除非显式重置。更关键的是，button在未设宽时会自动撑开，width或max-width缺失直接导致截断逻辑不触发。
让button支持单行省略号的最小必要CSS组合
必须同时满足四点，缺一不可：
-
width或max-width：不能是auto或未声明，推荐用max-width: 120px配合响应式单位 -
white-space: nowrap：加在button自身上，不是父容器 -
overflow: hidden：必须是hidden，auto或visible都失效 -
text-overflow: ellipsis：仅此一项没用，必须和前三者共存
示例：
.btn-ellipsis {
max-width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block; /* 显式声明，避免某些 UA 重置 */
}
Flex容器里的button省略号失效怎么办
当button作为flex子项时，min-width: auto会强制它撑开内容，绕过所有截断规则。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须加
min-width: 0，这是唯一解 - 若同时用了
flex: 1，建议再加width: 0防止 Safari 计算偏差 - 不要依赖
flex-basis替代width，它不触发text-overflow路径
正确写法：
.flex-btn {
flex: 1;
min-width: 0;
width: 0;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
button里含图标或内联元素时的坑
如果button里有<svg></svg>、<img>或带vertical-align的元素，white-space: nowrap可能被破坏，导致换行或省略号错位。
- 把图标用
background-image方式实现，避免 DOM 干扰 - 若必须内嵌，给图标加
vertical-align: top或middle，并确保父button设line-height: normal - IE11 下
button完全不支持text-overflow，需 JS fallback
最麻烦的地方在于：失效时不报错，按钮就静静显示全部文字——真机测试比 DevTools 模拟更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
