按钮应使用 display: inline-flex 实现文字自适应宽度，配合 flex-direction: row、align-items: center 和 min-width: 0；禁用 width/min-width/max-width；padding 用固定值或 rem；文字省略需 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 及 max-width。
按钮宽度要随文字自然伸缩，就别设 width、min-width 或 max-width——这些会直接覆盖内容自适应逻辑。
用 display: inline-flex 让按钮只占文字所需宽度
这是最轻量、兼容性够用（IE11+）的解法，比 inline-block 更可控，比 flex 不破坏行流。
-
display: inline-flex让按钮表现为“可伸缩的内联盒子”，能和文字、span并排，不独占一行 - 必须配合
flex-direction: row和align-items: center，否则子元素（比如图标+文字）可能错位 - 移除浏览器默认的
min-width: auto干扰：显式写min-width: 0或重置button { min-width: 0; } - 避免给
button设width类属性，哪怕只在某个 class 里漏写了，也会失效
内边距用 padding，但别用百分比
padding 的百分比值永远按父容器宽度计算，不是按钮自身宽高——窄屏下 padding 突然变小，宽屏下又撑得过大，视觉失衡。
- 推荐用固定值，如
padding: 8px 16px，或相对单位em（基于字体大小，更稳定） - 如果按钮字体随根元素缩放（
rem），padding也建议用rem同步缩放 - 慎用
box-sizing: border-box：它会让padding被包进宽高计算里，若你同时设了width就容易出偏差；纯自适应场景下可不用
文字过长时加省略号，三要素缺一不可
单纯 inline-flex 不会截断文字。要支持动态文本（比如文件名），得手动控制溢出。
- 在
button上同时加：white-space: nowrap、overflow: hidden、text-overflow: ellipsis - 必须设
max-width（如max-width: 200px），否则ellipsis不生效 - 父容器不能有
overflow: hidden，否则整个按钮会被裁掉 - 如果按钮要换行（比如多行说明），那就换用
display: block+white-space: normal，但此时宽度不再“随字数”，而是由width决定
真正难的不是写对那几行 CSS，而是记住哪些地方“不能写”——比如 min-width、width、父级 overflow: hidden、漏掉 white-space: nowrap……这些细节能让整个自适应逻辑静默失效，且不容易一眼看出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
