在button中失效，因button默认white-space: nowrap压制换行；须显式设white-space: normal或pre-line，并配合display: block/inline-block和width才能生效。
button里直接用
会失效，因为默认white-space: nowrap
浏览器给button元素设了white-space: nowrap，所以即使你在HTML里写，
常见错误现象：button里完全没反应；手动敲回车或加多个空格也没用；用innerHTML动态插入
- 必须显式覆盖
white-space，设为normal、pre-line或pre-wrap -
white-space: normal最常用：允许自动折行，忽略源码换行符 -
white-space: pre-line适合后端返回带\n的字符串，比如用户输入的多行按钮文案 - 别用
pre，它禁止自动折行，超长文本会撑破容器
设置width + display: block是换行前提
button默认是inline元素，不响应width，所以光设width: 200px没用，文字照样挤成一行溢出。
必须先让它变成块级或可宽控元素：
- 加
display: block或display: inline-block（后者保留行内上下文） - 配合
width（像素值或百分比）和white-space: normal - 加上
text-align: center让多行文字居中，否则默认左对齐 - 注意
padding会影响实际可用宽度，计算时要减去左右内边距
示例CSS：button.wrap-btn { display: block; width: 180px; white-space: normal; text-align: center; }
中文按钮换行常卡在词中间，用word-break不如wbr精准
中文没有空格分隔，word-break: break-all会把“确认收货”切成“确/认/收/货”，阅读困难；word-wrap: break-word又常不触发，因为中文每个字都算“单词”。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
更可控的方式是主动标注断行点：
- 在HTML中用
-
- 比
- 现代浏览器全支持，无需polyfill
移动端按钮换行错位？检查font-size和line-height是否固定
在小屏幕下，如果按钮文字突然换行错位、行高塌陷或文字被截断，大概率不是换行逻辑问题，而是字体渲染失控。
关键细节：
- 避免用
em或rem设font-size却不配line-height，缩放时行高可能不匹配 - 用
line-height: 1.4这类无单位值，比line-height: 20px更可靠 - 按钮高度建议用
min-height而非height，留出多行文字伸展空间 - 测试时打开设备模拟器的“禁用字体缩放”选项，排除系统级干扰
真正难调的不是“怎么换行”，而是“换在哪”和“换完还好看”。white-space: normal再配弹性line-height，基本覆盖95%场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
