按钮设 width: fit-content 即可自适应文字宽度，无需修改 display 或 box-sizing；flex 容器中需加 flex: none 和 align-self: flex-start；中文长文本应配 overflow-wrap: break-word 防溢出；grid 中用 justify-self: start 控制对齐。
按钮加 width: fit-content 就够了，别动 display 或 box-sizing
按钮默认是 inline-block（<button></button> 元素），本身就有内容包裹特性。直接设 width: fit-content 即可让宽度紧贴文字，既不会撑满父容器，也不影响 padding/border 布局。不需要改成 display: inline-block，更不用调 box-sizing——后者只管 padding/border 是否计入宽高，和“内容多宽就占多宽”无关。
常见错误是额外加 display: inline-block，结果反而破坏了原生按钮的垂直对齐行为（比如和文字基线错位）；或者误以为要配 box-sizing: border-box 才“紧凑”，其实冗余的 padding 才是真问题。
Flex 容器里的按钮必须加 flex: none
如果按钮放在 display: flex 的父容器中，它大概率会无视 width: fit-content，强行拉伸占满剩余空间。这不是 bug，是 flex 默认的 flex: 1 1 auto 在起作用。
- 必须显式重置：
flex: none（等价于flex: 0 0 auto） - 再补一句
align-self: flex-start，防止父容器设了align-items: center导致按钮被垂直拉伸 - 完整写法：
button { width: fit-content; flex: none; align-self: flex-start; }
中文长文本按钮要防溢出，overflow-wrap: break-word 比 max-width 更可靠
中文没有空格断点，width: fit-content 会按 max-content 计算——也就是把整段文字当一行撑开。父容器一窄，按钮就水平溢出，还可能不触发滚动条（尤其 overflow: hidden 时）。
解决方法不是简单加 max-width，而是强制断行：
-
overflow-wrap: break-word：在任意字符间断行，适合按钮内嵌长中文标签 - 或用
white-space: normal+word-break: break-word组合 - 如果想保留“不换行但卡上限”，才用
width: fit-content; max-width: 200px;
Grid 中单个按钮自适应，别碰 grid-template-columns
有人想让 Grid 里某个按钮缩进，就去改列定义，比如写 grid-template-columns: fit-content(200px)。这不仅无效（fit-content() 是 Grid 轨道函数，不接受无参写法），还会让整列都跟着变，失去控制粒度。
正确做法是直接作用于按钮自身：
-
justify-self: start（让按钮左对齐，避免被居中拉伸） width: fit-content- 确保没设
grid-column: span X，否则跨列会覆盖宽度逻辑
真正难的不是写对属性，而是意识到：fit-content 不是万能开关，它的效果高度依赖上下文——Flex、Grid、中文断行、空内容处理，每个场景都得单独验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
