按钮自适应宽度的唯一可靠起点是display: inline-flex，需同时满足：样式写在button自身、显式声明flex-direction: row、设置align-items: center，并重置min-width: 0以突破ua样式限制。
按钮自适应宽度不是靠 width: auto 或 width: 100% 就能搞定的——浏览器 UA 样式里默认的 min-width: auto 会直接覆盖你写的规则，导致按钮要么撑满父容器，要么在小屏下文字换行、点击区缩水。真正可控的起点只有一个：display: inline-flex，但必须配对清除干扰项。
为什么display: inline-flex是唯一靠谱的起点
按钮是替换元素，自带 UA 强干预逻辑。display: flex会让它变成块级元素，哪怕只写“确定”，也强制独占一行，破坏段落内嵌、图标并排等常见场景；display: inline-block虽内联，但子元素垂直对齐难控，vertical-align容易错位，也不支持 align-items。
display: inline-flex让按钮表现成一个“可伸缩的内联盒子”，天然支持 vertical-align，IE11+ 原生兼容，无需 JS 或 polyfill。但它要生效，必须满足三个条件：
- 样式必须写在
<button></button>元素自身上（不是外层 wrapper） - 显式声明
flex-direction: row（IE11 必须写，不能依赖默认） - 必须加
align-items: center，否则图标和文字因行高差异上下错位
min-width: 0 比 width: auto 更关键
很多开发者写了 width: auto 却没效果，是因为 UA 样式中 min-width: auto 的优先级更高，它会锁死最小宽度，让按钮无法收缩。仅靠 width 不足以突破这个限制。
正确做法是显式重置：
- 删掉所有
width、min-width、max-width（包括你在某个 class 里漏写的min-width: 80px） - 强制写
min-width: 0（比width: auto更稳妥，尤其在旧版 Safari 中） - 禁用
flex-grow、flex: 1等拉伸属性，它们会覆盖自适应逻辑
text-overflow: ellipsis 在按钮里不生效的硬性条件
这不是 CSS 写错了，而是三个条件缺一不可——漏一个，省略号就永远不会出现：
-
white-space: nowrap：防止文字在窄空间内自动换行，否则根本不会溢出 -
overflow: hidden：必须加在按钮自身上，加在父容器会把整个按钮裁掉边框和文字 -
max-width: 200px（或其他具体值）：没有上限，ellipsis就不触发；width: auto不等于“有上限”
注意：max-width 建议设在按钮上，而不是外层 <div>；如果按钮嵌套在 <code><p></p> 中，确保该 <p></p> 没有 overflow: hidden。
移动端触控区 ≥44×44px 不是靠 font-size 和 padding 就够的
光设 font-size: 16px + padding: 8px 16px，在 iPhone 15 Pro 这类高 DPI 屏上，物理点击区可能只有 28×28px 左右，远低于 iOS/Android 可访问性底线。
可靠解法是用相对单位扩展响应区：
- 用
rem或vw写padding，比如padding: 0.8rem 1.2rem，随根字体缩放 - 避免写死
height，用line-height+padding共同决定视觉高度 - 含图标时，用
vertical-align: middle对齐基线，比top更稳定
viewport 标签漏写或加了 maximum-scale=1.0，所有上述布局都会失效——它必须放在 最前面，且不能禁用用户缩放。
