按钮不支持text-overflow: ellipsis，因它是替换元素；应将文字用span包裹并设inline-block、width:100%、overflow:hidden、white-space:nowrap、text-overflow:ellipsis，同时button需设max-width和overflow:hidden。
按钮文字超出限制时，不能直接套用普通文本的 text-overflow: ellipsis，因为 <button> 默认是替换元素（replaced element），且内部盒模型行为特殊——多数浏览器下 white-space: nowrap 和 text-overflow 对它无效。
button 元素不支持 text-overflow 的原因
原生 <button> 在 Chrome、Firefox、Safari 中均不响应 text-overflow: ellipsis，即使加了 overflow: hidden 和 white-space: nowrap 也无效。这不是 bug，而是规范行为：按钮内容渲染逻辑独立于普通块级流，text-overflow 只对「内联级可换行内容」生效。
-
<button>内部文本由 UA 样式控制，无法被标准文本截断规则接管 - 部分浏览器（如旧版 Safari）甚至会忽略
max-width或强制撑宽容器 - 直接在
<button>上设display: block+text-overflow仍不生效
用 <span> 包裹文字并设 display: inline-block
最可靠的做法是放弃直接操作 <button>，改用语义等价但更可控的组合：把文字抽出来放进 <span>，再用 CSS 控制其溢出行为。
- 给
<button>设固定宽度或max-width，并设overflow: hidden和padding留白 - 内部
<span>设display: inline-block、width: 100%、overflow: hidden、white-space: nowrap、text-overflow: ellipsis - 避免用
flex布局包裹文字——min-width: 0不总能生效，且 IE11 下兼容性差
.btn {
max-width: 120px;
overflow: hidden;
padding: 8px 12px;
}
.btn span {
display: inline-block;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
HTML：<button class="btn"><span>这是一个超长按钮文字</span></button>
立即学习“前端免费学习笔记（深入）”；
需要换行时优先用 overflow-wrap + white-space: normal
如果按钮文字允许折行（比如移动端小屏），别用 word-break: break-all，它会在任意字节中断中文，导致“身”“份证”这种不可读切分。
- 用
white-space: normal（默认值）确保自然换行点 - 加
overflow-wrap: break-word处理无空格长串（如 Base64、URL） - 配合
line-height和text-align: center避免多行错位 - 若按钮是
flex子项，务必在其上显式设min-width: 0，否则 flex 会阻止收缩换行
多行省略号在 button 里基本不可行
-webkit-line-clamp 要求 display: -webkit-box，而 <button> 不接受该 display 值；强行包裹一层 <div> 再套 <button> 会破坏可访问性（焦点/键盘操作异常）和语义。
- 真要多行截断，建议改用
<a href="#" role="button">+ JS 模拟点击 - 或后端/JS 提前截断字符串（如
str.substring(0, 12) + "..."），比纯 CSS 更可控 - 移动端可考虑用
font-size: clamp(14px, 4vw, 16px)动态缩放文字，避开截断需求
真正麻烦的不是怎么写样式，而是按钮既要保持语义正确、键盘可访问、屏幕阅读器友好，又要视觉上“看起来像按钮”——这时候 CSS 截断只是表象，底层得靠结构和逻辑兜底。
