display: inline-flex是最优解，因其让按钮表现为可伸缩的内联盒子，仅占内容宽度、能与文字并排，兼容IE11+；而display: flex会使其块级化独占一行，破坏行流布局。
用 display: inline-flex 是最直接、兼容性够用、不依赖 JS 的解法。 它让按钮只占内容宽度，能和文字并排，又不会像 display: flex 那样强行块级化、独占一行。
为什么 display: inline-flex 比 display: flex 更适合自适应宽度
按钮要“随文字变宽”，但又不能破坏行流——比如放在一段话中间，或跟在 <span> 后面。这时候 display: flex 会让按钮变成块级元素，哪怕里面只有“确定”两个字，也会横跨整行，导致换行错乱。display: inline-flex 则把它变成一个“可伸缩的内联盒子”，天然支持 vertical-align，也兼容 IE11+，无需前缀。
常见错误是误以为加了 width: auto 就能自适应，其实浏览器 UA 样式里常带 min-width: auto 或 width: 100%，会覆盖你的设置。
- 必须显式重置
min-width: 0或width: auto（推荐前者，更稳妥） - 避免给按钮本身设
width、min-width、max-width，否则会锁死自适应逻辑 - 父容器不能有
overflow: hidden，否则可能裁掉按钮边缘
文本过长时怎么安全截断显示省略号
纯 inline-flex 不处理溢出，文字一长就撑破布局。要实现 … 效果，三者缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
white-space: nowrap：防止文字意外换行（很多人漏这步） -
overflow: hidden：隐藏超出部分 -
text-overflow: ellipsis：触发省略号 - 必须搭配
max-width（如max-width: 200px），否则ellipsis不生效
注意：max-width 建议设在按钮上，而不是外层 wrapper；如果按钮嵌套在 <p> 或 <div> 中，确保该父容器没有 overflow: hidden，否则整个按钮可能被裁掉。
H5 场景下还要防触控失效和字体缩放失衡
移动端点击区域不能小于 44×44px，光靠按钮自身 height 不够——很多按钮 padding 小、文字小，实际可点区域远低于标准。解决方式不是硬调高 height，而是用 padding 扩展响应区，同时保持视觉高度合理。
字体建议用 rem，配合根元素动态调整。比如 H5 页面在 iPhone SE 和 iPad 上字号一致，但实际物理尺寸差一倍，用户会误触。用 rem + JS 动态设 html { font-size }，能让按钮整体按设备像素密度缩放。
- 按钮高度控制在 44–60px 区间，兼顾触控与视觉节奏
- 避免用
px写font-size、padding、border-radius - 图标与文字之间留至少 8px 间距，用
gap或margin控制，别靠空格硬凑
真正难的不是写对那几行 CSS，而是判断「这个按钮到底该不该自适应」——比如表单提交按钮，常需和输入框对齐，这时反而要固定宽度；而操作栏里的「编辑」「删除」按钮，才需要随文字弹性伸缩。别为了“自适应”而自适应。
