HTML5中实现按钮文字换行并精确控宽有四种方法：一、块级显示+white-space:normal；二、flex布局+flex-wrap；三、table-cell模拟；四、伪元素绝对定位分段控制。
如果您希望在HTML5中创建一个带有文字换行效果的按钮，并精确控制其宽度，需避免默认的内联显示与文本截断行为。以下是实现该效果的具体步骤：
一、使用white-space和width配合块级显示
通过将按钮设为块级元素并设置white-space为normal，可允许文字在指定宽度内自动换行。此方法无需修改HTML结构，仅依赖CSS控制。
1、在HTML中定义button标签，添加自定义class，例如。
2、在CSS中为该class设置display: block；确保按钮独占一行并响应宽度属性。
立即学习“前端免费学习笔记（深入）”；
3、设置width为具体像素值或百分比，例如width: 200px；。
4、添加white-space: normal；覆盖button默认的white-space: nowrap；行为。
5、可选地加入text-align: center；使多行文字居中对齐。
二、使用flex布局配合flex-wrap
将button内部文字容器设为flex容器，启用flex-wrap可让子元素（如span）在宽度不足时换行，适用于需精细控制每行内容的场景。
1、在button内包裹文字的span标签，例如。
2、为button设置display: flex；和flex-direction: column；确保垂直堆叠。
3、为span设置display: flex；、flex-wrap: wrap；和width: 100%；。
4、为span内的每个词或短语用空格分隔，或插入
5、设置button的width为固定值，例如width: 180px；，触发内部flex换行。
三、使用table-cell模拟换行按钮
利用display: table-cell的特性，结合vertical-align和width，可强制内容在限定区域内折行，兼容性较好且不依赖现代flex特性。
1、将button外层包裹一个div，设置div的display: table；和width: 160px；。
2、为button本身设置display: table-cell；、vertical-align: middle；和width: 100%；。
3、在button上显式声明word-break: break-word；或overflow-wrap: break-word；。
4、移除button默认padding-left和padding-right以外的内边距干扰，保留上下padding以维持高度。
5、确保button字体大小适配，避免单字过宽导致换行异常，例如font-size: 14px；。
四、使用伪元素与绝对定位分段控制
当需要严格按语义分两行显示（如第一行为主操作，第二行为副说明），可通过伪元素将第二行文字独立定位，实现视觉换行且宽度可控。
1、为button添加data-second-line属性，例如。
2、在CSS中设置button position: relative；和width: 150px；。
3、使用::before伪元素生成第一行内容，content: attr(data-first-line, "提交申请")；（需预设data-first-line）。
4、使用::after伪元素生成第二行内容，content: attr(data-second-line)；，并设置position: absolute；bottom: 0；left: 0；right: 0；text-align: center；。
5、为::after添加font-size: 12px；和color: #666；以区分层级。
