推荐使用 Flex 布局：按钮内嵌两个 ，CSS 设置 display: flex; flex-direction: column 实现「加入」在上、「购物车」在下垂直堆叠，语义清晰、兼容性好、无障碍友好且易于响应式控制。
按钮内文字强制换行的 CSS 方法
HTML 按钮默认是单行内联元素，<br> 在 <button></button> 里无效，直接写换行符或空格也不会折行。想实现「加入购物车」上下两行显示（比如「加入」在上、「购物车」在下），必须用 CSS 控制。
最稳妥的做法是给按钮加 white-space: pre-line 或 white-space: normal，再配合换行符（\n）或 <div> 块级结构：
<ul>
<li>
<code>white-space: pre-line：保留 HTML 中的换行符（需在 JS 动态设置 innerHTML 或用模板字符串插入 \n），但会合并多余空格
display: flex; flex-direction: column; + 两个 <span></span>，语义清晰、兼容性好、无空白符依赖word-break: break-all 或 text-wrap: wrap 强行断词——「购物车」会被切成「购 物 车」，体验差使用 Flex 布局实现双行按钮（推荐）
这是目前最可控、最易维护的方式，不依赖特殊字符或浏览器对 \n 的解析差异：
<button class="add-to-cart-btn"> <span>加入</span> <span>购物车</span> </button>
CSS 部分：
立即学习“前端免费学习笔记（深入）”；
.add-to-cart-btn {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 8px 12px;
line-height: 1.2;
}
.add-to-cart-btn span {
font-size: 14px;
margin: 0;
}
- 用
flex-direction: column确保两个<span></span>垂直堆叠 -
line-height: 1.2防止上下行间距过大；若需紧凑，可设margin: 0或margin-bottom: -2px - 不要给
<button></button>设固定高度后强行用padding挤出空间——不同字体渲染下容易错位
移动端适配与点击热区注意事项
双行按钮在小屏上容易被误点或触发区域过小，尤其 iOS Safari 对 <button></button> 的最小点击区域有隐式限制：
- 确保按钮整体高度 ≥ 44px（iOS 推荐最小触控尺寸），可通过
min-height: 44px+padding组合保证 - 避免只靠
font-size缩小文字来“塞”进窄容器——文字太小影响可读性，也降低点击命中率 - 如果按钮放在卡片底部等密集区域，加
margin-top: 8px隔开上层内容，防止手指误触相邻元素 - 不要用
transform: scale(0.9)缩放按钮来适配布局——会同步缩小点击热区，且可能触发 Safari 的 zoom bug
为什么不用伪元素或 ::before/::after 插入第二行？
有人尝试用 ::after 添加「购物车」文字，看似简洁，但实际问题很多：
- 伪元素内容无法被屏幕阅读器正确识别，无障碍支持差
- 无法单独控制第二行颜色、字号或响应式行为（比如大屏想变单行）
- 当按钮需要禁用状态（
disabled）时，伪元素仍显示，视觉与功能不一致 -
content属性不支持 HTML 标签，无法嵌入图标（如购物车 SVG），扩展性差
真正要兼顾语义、可访问性、维护性和响应式，还是老老实实用两个子元素 + Flex。
