button 默认 line-height 会撑高容器，因其是替换元素且垂直居中依赖字体度量；需配 line-height: 40px 或 flex 布局，避免 vertical-align；text-overflow 需包裹 block span；注意 box-sizing、font-size 下限及字体度量影响。
button 元素默认 line-height 会撑高容器
HTML <button></button> 是替换元素（replaced element），浏览器会给它内置的 line-height 和内边距，即使你设了 height: 40px，文字仍可能上下溢出——尤其当字体偏大或用了非标准字体时。这不是 bug，而是浏览器为了保证可读性做的默认兜底。
根本原因在于：按钮内部文本的垂直居中依赖于 line-height，而它的计算基准是字体度量（ascent/descent），不是你写的 height 值。所以光设 height 不够，必须显式控制行高。
- 不要只写
height: 40px，必须配line-height: 40px（前提是单行文本） - 若按钮含图标+文字，或需多行，改用
display: flex; align-items: center; justify-content: center;替代line-height - 避免用
vertical-align，它对<button></button>无效，且易被父容器 line-height 干扰
text-overflow: ellipsis 在 button 里不生效的常见原因
text-overflow: ellipsis 在 <button></button> 中极少成功，因为 button 默认是 inline-level 替换元素，不满足「块级 + 明确宽度 + overflow: hidden + white-space: nowrap」四件套要求。
强行加 display: block 或 inline-block 会破坏按钮默认的基线对齐和尺寸行为，尤其在表单中容易引发布局错位。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 真正可靠的做法是：用
max-width+overflow: hidden+text-overflow: ellipsis，但必须包裹一层<span></span>并设为display: block - 示例：
<button><span style="display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">超长按钮文字</span></button>
- 更稳妥的替代方案：JavaScript 截断字符串后赋值，避开 CSS 截断兼容性问题
响应式按钮中 vw/vh 单位与 line-height 的冲突
用 font-size: 4vw 配 line-height: 1 看似简洁，但在小屏上，4vw 可能缩到 8px 以下，此时 line-height: 1 会让文字紧贴上下边框，甚至被裁掉顶部字形（如字母 “t” 的上伸部）。
- 永远给
font-size设min-font-size（如min-font-size: 12px），CSS 尚未原生支持，可用媒体查询模拟 -
line-height建议用无单位数值（如1.2），而非1；1.2在小字号下更安全，大字号下也足够紧凑 - 若用
rem或em，确保根字体大小稳定；避免在 button 上直接用vh控制高度，它会随视口变化导致文字相对位置漂移
box-sizing 和 padding 对按钮文字溢出的影响
很多人设了 height: 40px 后发现文字还是溢出，其实是忘了 padding 占用了空间。默认 box-sizing: content-box 下，height 不包含 padding，文字实际可用高度只剩 40px - topPadding - bottomPadding。
- 统一加
box-sizing: border-box，让height包含 padding - 慎用
padding-top和padding-bottom分开设置，不同浏览器对 button 的 baseline 计算有差异，可能导致文字视觉偏高或偏低 - 推荐写法：
padding: 0 16px（左右留白），再用line-height或flex控制垂直居中，比拆分 padding 更可控
实际项目中最容易被忽略的，是按钮字体本身的设计度量——比如某些自定义字体 ascent 值极大，即使 line-height: 1 也会溢出上边缘。这种情况下，仅靠 CSS 无法解决，得换字体、或用 transform: translateY() 微调，但那是最后手段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
