按钮文字响应式切换需将完整与简写文字分别包裹在span中并用d-none/d-md-inline等类控制显隐，避免纯文本混排导致样式失效；须加text-nowrap、统一line-height及分级padding确保视觉一致。
按钮文字响应式切换的常见失败点
直接写两套文字用 display 控制隐藏，结果小屏文字没消失、大屏文字被截断——根本原因是 Bootstrap 的响应式类（如 d-none d-md-inline）作用在文字容器上，但按钮内部结构不规范，导致样式失效或盒模型错乱。
真正起效的前提是：按钮内容必须拆分为独立可控制的 DOM 节点，且不能依赖纯文本节点混排。
- 错误写法：
<button class="btn">查看详情</button>—— 无法对“查看”和“详情”分别控制 - 正确思路：把完整文字和简写文字分别包裹在
<span>里，再用响应式类精准控制显隐 - Bootstrap 5+ 推荐用
d-none d-md-inline（小屏隐藏、中屏及以上显示），避免用过时的hidden-xs类
用 <span> + 响应式类实现双文字切换
最轻量、兼容性最好的方案，不依赖 JS，纯 CSS 控制：
<button class="btn btn-primary"> <span class="d-none d-md-inline">查看详情</span> <span class="d-inline d-md-none">详情</span> </button>
注意两点：
-
d-none d-md-inline表示：小屏（xs、sm）完全隐藏，中屏（md）及以上才显示；d-inline d-md-none则相反 - 必须确保两个
<span>在同一行内渲染，不能换行或加空格，否则小屏可能多出空白或换行 - 如果按钮有图标，建议把图标也包进对应
<span>，比如<span class="d-none d-md-inline"><i class="bi bi-eye"></i> 查看详情</span>
遇到文字溢出或高度不一致怎么办
即使用了响应式类，仍可能看到小屏按钮文字撑高、圆角变形或文字被裁切——这通常不是类名写错了，而是默认的 white-space 和 line-height 在不同尺寸下表现不一致。
- 强制单行不换行：
text-nowrap加到按钮上，防止“查看详情”在窄屏被折成两行 - 统一行高：
align-baseline或自定义line-height: 1.2，避免简写文字因字号略小导致垂直居中偏移 - 检查 padding：小屏时若按钮
px-4过大，可改用px-2 px-md-4分级控制左右内边距
要不要用 JavaScript 动态切换文字
能用 CSS 解决的，就别动 JS。但如果你的按钮文字来自 i18n 多语言包，或需要根据实时窗口宽度做更细粒度控制（比如 lg 屏显示“查看详情”，xl 屏显示“查看详情（含附件）”），才考虑 JS 方案。
- 监听
resize开销大，推荐用matchMedia：if (window.matchMedia("(min-width: 768px)").matches) { ... } - 不要直接操作
textContent，优先用classList.toggle()控制已有<span>的显隐，保持 DOM 稳定 - 服务端渲染场景下，JS 切换会有闪屏，务必在 SSR 时按初始视口宽度预设好 class
真正麻烦的从来不是怎么切文字，而是按钮在各种设备上保持视觉节奏一致——留白、圆角、阴影、焦点状态，都得跟着文字长度动态适应。这点光靠响应式类搞不定，得结合设计系统里的 spacing scale 和 type scale 一起调。
