按钮中text-overflow: ellipsis失效，因button默认为inline元素，缺display: inline-block、white-space: nowrap和明确width/max-width三要素；需同时设置才生效。
按钮里 text-overflow: ellipsis 为什么不起作用？
因为 <button></button> 默认是 inline 元素，没有块级宽度约束，且继承的 white-space: normal 允许换行——这两点直接让 text-overflow 被浏览器静默忽略。
常见错误写法：button { text-overflow: ellipsis; overflow: hidden; }，缺了三样关键东西：块级显示、禁止换行、明确宽度。
- 必须加
display: block或display: inline-block（推荐后者，保留行内布局特性） - 必须加
white-space: nowrap，否则文字会折行，根本不会触发“单行溢出”逻辑 - 必须设
width或max-width；width: 100%在 flex 容器中可能失效，建议用固定值或max-width
<button></button> 单行省略号的最小可行 CSS
以下样式能直接复用，已验证在 Chrome/Firefox/Edge（2026 年主流版本）中生效：
button {
display: inline-block;
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 8px 12px;
box-sizing: border-box;
}
注意点：
-
max-width比width更安全，避免按钮在窄屏下被强行拉伸 - 如果按钮在
flex容器里，父级需加flex-shrink: 0，否则max-width可能被 flex 布局覆盖 - 不要给
button设height同时又设padding，容易导致文字垂直居中偏移
按钮含图标时省略号错位怎么办？
当按钮里混用文字和 <svg></svg> 或 <img>，white-space: nowrap 会让图标和文字挤成一行，但图标默认 vertical-align: baseline，常导致文字基线不齐、省略号位置上浮或下沉。
解决方法很简单：
- 给图标加
vertical-align: middle（不是top或bottom） - 确保图标尺寸与行高匹配，比如设
height: 1em; width: 1em; - 若仍偏移，可临时加
line-height: 1.4统一文本行高（避免用line-height: 0，会破坏可访问性）
需要多行按钮文字截断？别硬套 -webkit-line-clamp
按钮不是段落容器，display: -webkit-box + -webkit-line-clamp 在按钮上兼容性极差：Firefox 不支持、Safari 17+ 才稳定、且按钮的 user-select: none 行为会干扰伪元素渲染。
真要两行截断，有两个务实选择：
- 改用
<div role="button">，脱离原生按钮限制，再套 <code>-webkit-line-clamp（注意加overflow: hidden和line-height配合） - 用 JS 判断：
button.scrollHeight > button.clientHeight，然后手动截词（优先截到空格或标点后），比纯 CSS 更可控
最常被忽略的一点：按钮文字截断不是为了省空间，而是防止文案失控撑爆 UI。所以与其纠结多行省略，不如从设计源头控制按钮文案长度——12 字以内基本不用截断。
