按钮内文字溢出时text-overflow: ellipsis不生效，因button默认为inline元素，需配合display: inline-block/block、固定width、white-space: nowrap及overflow: hidden才生效。
按钮内文字溢出时 text-overflow: ellipsis 不生效？
直接给 <button></button> 加 text-overflow: ellipsis 几乎总失败——因为按钮默认是 inline 元素，不支持该属性所需的前提条件。它必须配合 display: block 或 inline-block、固定宽度、white-space: nowrap 和 overflow: hidden 才能触发省略号。
常见错误现象：文字撑开按钮、右侧被截断但没省略号、整个按钮变形。
- 必须显式设置
width（或max-width），仅靠min-width不够 - 需重置
white-space：按钮默认允许换行，得加white-space: nowrap - 不能依赖父容器的
overflow: hidden，必须作用在按钮自身上 - 若用
flex布局包裹按钮，注意flex-shrink: 0防止被压缩导致宽度失效
单行按钮文字截断 + 省略号的最小可行 CSS
以下样式可直接复用，适用于大多数现代浏览器（IE11+ 需加 -ms-text-overflow: ellipsis）：
.btn-truncate {
display: inline-block;
width: 120px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
padding: 8px 12px;
}
关键点：
-
display: inline-block是必要前提，block也行，但会独占一行 - 如果按钮有图标（如
<span class="icon"></span>），确保图标不参与文本流，否则white-space: nowrap会把它一起“锁住” - 移动端要注意
width值是否随屏幕缩放失效——建议用vw或媒体查询动态调整
多行按钮？别硬来，换方案
原生 <button></button> 不支持 -webkit-line-clamp，强行套多行省略会失效或触发渲染异常。这不是兼容性问题，而是语义和渲染限制。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
真实场景中，所谓“多行按钮”通常应被重构为：
- 用
<div role="button"> 替代，手动绑定 <code>click和键盘事件（如Enter、Space） - 加
tabindex="0"保证可聚焦，再用 CSS 实现多行省略（display: -webkit-box等） - 若只是需要视觉上像按钮的块状区域，优先考虑
<a href="#"></a>+role="button"，语义更清晰 - 用
word-break: break-word或overflow-wrap: break-word让长单词/URL 自动折行（适合英文或带连字符内容） - 对中文为主的内容，
white-space: normal+padding调整，比省略更友好 - 配合
font-size: clamp(14px, 4vw, 16px)实现响应式字号缩放，从源头缓解溢出 - 若按钮是固定尺寸图标按钮（如「⋮」），干脆隐藏文字，用
title属性提供悬停提示
强行给 <button></button> 设 height 和 line-clamp 很可能造成点击热区错位或文本垂直居中失效。
按钮文字溢出但不想省略？试试柔性处理
省略号不是唯一解。当业务允许时，更自然的处理方式包括：
真正容易被忽略的是：按钮的交互反馈区域（hit area）必须完整覆盖可见文本。一旦用 overflow: hidden 裁剪，要确认裁剪部分不影响可访问性（如 screen reader 仍能读全文字）。
