使用 -webkit-line-clamp: 2 是目前唯一可靠控制按钮文字最多两行并显示省略号的 css 方案，需配合 display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden 及明确宽度，但 firefox 不支持，须用 js 回退。
按钮文字强制最多两行显示的 CSS 写法
直接用 white-space: normal + line-clamp 是最稳妥的方式，但要注意浏览器兼容性和父容器限制。不能只靠 height 或 max-height 硬卡，容易截断字形或破坏可访问性。
-
display: -webkit-box和-webkit-line-clamp: 2是目前唯一可靠控制行数的组合，必须配合-webkit-box-orient: vertical - 按钮需设为
display: inline-block或block，inline元素不支持-webkit-box - 必须设置明确的宽度（如
width: 120px或max-width: 100%），否则line-clamp不生效 - Firefox 目前不支持
-webkit-line-clamp，需用 JavaScript 回退（见下一条）
Firefox 下 fallback 方案：用 JS 控制行高与溢出
纯 CSS 在 Firefox 中无法实现精确两行截断，得靠脚本测量。核心思路是：获取字体大小、行高、按钮宽度，动态计算最大允许高度，并设 overflow: hidden。
- 监听按钮
resize和load事件，确保内容变化后重新测量 - 用
getComputedStyle(el).lineHeight获取实际行高（注意返回值可能是"1.5"或"24px"，需转换为像素） - 设
max-height: calc(2 * lineHeight)，再加overflow: hidden和text-overflow: ellipsis（但注意：ellipsis在多行中不生效，需用 canvas 或伪元素模拟省略号）
别踩这些坑：按钮内文字换行的常见误操作
很多人试图用 word-break: break-all 或 hyphens: auto 强制折行，结果导致单词被随意切断，影响可读性；也有人给 button 设 height 后发现文字被裁掉一半——那是因为没设 box-sizing: border-box，内边距和边框吃掉了可用空间。
- 避免用
br标签手动换行：<button>第一行<br>第二行</button>—— 这会让语义混乱，屏幕阅读器可能读成两段独立文本 - 不要依赖
vertical-align调整文字位置，它只对 inline 元素起作用，且不解决行数限制问题 - 如果按钮用了
background-image或padding，记得在计算max-height时减去上下 padding 值
移动端适配时的额外注意点
iOS Safari 对 -webkit-line-clamp 支持良好，但 Android Chrome 在某些版本（如 Chrome 80–90）里存在渲染延迟：文字首次加载时显示完整，重绘后才截断。解决办法是触发一次强制重排。
- 在设置样式后，立即读取一次
offsetHeight，即可强制同步渲染 - 使用
font-size: clamp(14px, 4vw, 16px)时，line-clamp的行高会随缩放变化，建议用rem或固定像素定义line-height - 避免在
:active状态中改变padding或font-size，否则两行限制可能瞬间失效
实际应用中，-webkit-line-clamp 覆盖绝大多数场景，但只要项目需要支持 Firefox 或旧版 Edge，就得准备好 JS fallback；而所有方案都绕不开一个事实：按钮不是纯文本容器，它的交互属性（如 focus outline、press state）会和文字截断逻辑产生隐式冲突，调试时得打开开发者工具逐帧看渲染变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
