按钮换行需设置 white-space: normal 或 break-spaces，超长无空格字符串需配合 overflow-wrap: break-word；Flex 布局下须设 min-width: 0；优先用 padding 控制尺寸，避免固定 height。

按钮文字默认不换行，white-space 是关键开关

HTML 中 默认把内部文本当做一个不可分割的“块”处理，即使内容超宽，浏览器也会强行压缩字间距或溢出容器，而不是自然折行。根本原因在于其默认的 white-space: pre-wrap（实际是 pre 行为变体，但受 button UA 样式影响常表现为 nowrap）。真正起效的是显式设置 white-space：

• white-space: normal：允许空格处换行，最常用
• white-space: break-spaces：保留空格且在空格/换行符处断行（适合带空格的长词）
• 避免用 white-space: pre-line —— 它会合并连续空格，可能意外删掉按钮里有意加的空格

用 word-break 或 overflow-wrap 处理超长无空格字符串

如果按钮文字是类似 "thisIsAVeryLongCamelCaseString" 这种没空格的单词，仅靠 white-space: normal 不会换行。这时需要补充断词策略：

• word-break: break-all：强制在任意字符间断行（包括中文、英文连写），简单粗暴但可能割裂语义
• overflow-wrap: break-word：只在必要时（内容溢出）才在单词内断行，更安全；对中文天然友好
• 注意：word-break: break-word 是过时写法，应统一用 overflow-wrap: break-word

Flex 布局下按钮换行失效？检查 min-width 和 flex-shrink

把 放进 display: flex 容器时，它默认有 min-width: min-content，会阻止收缩换行。常见现象：按钮宽度撑满父容器，文字挤成一坨。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 加 min-width: 0 解除最小宽度限制
• 或设 flex-shrink: 1（默认是 1，但某些 UA 样式可能覆盖）
• 同时确保父容器有明确宽度（如 width: 200px），否则按钮仍按内容自适应

移动端点击区域变小？别忘了 padding 和 line-height 配合

换行后按钮高度增加，但若只依赖 line-height 控制行高，可能造成上下留白不均、点击热区偏移。尤其 iOS Safari 对 button 的默认 line-height 处理较特殊。

• 优先用 padding 控制整体尺寸，例如 padding: 8px 16px
• 如需精确控制单行高度，设 line-height: 1.4（无单位），并配合 height: auto
• 避免设固定 height —— 换行后内容高度变化，会导致文字被裁剪

实际中最容易漏掉的是 min-width: 0 这一条，在 Flex 场景下几乎必现；还有人误以为 word-break: break-word 是标准写法，其实它已被 overflow-wrap 取代。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！