必须修改.layui-form-radio span样式：设display:block、white-space:normal、word-break:break-word、max-width及height:auto!important，并调整.align-items或用inline-flex解决图标错位。
layui单选框label文字换行失效怎么办
直接给label加white-space: normal基本没用——Layui把单选框和label包在.layui-form-radio或.layui-form-checkbox容器里，且默认设了white-space: nowrap和固定高度。你改原生label，根本没动到真正起作用的节点。
- 必须定位到
.layui-form-radio span（单选）或.layui-form-checkbox span（复选），它们才是包裹文字的实际容器 - 加
display: inline-block或display: block，否则white-space: normal对inline元素无效 - 同时设
max-width: 100%或具体像素值（如max-width: 200px），否则文字会无限撑宽容器 - 别漏
vertical-align: top，否则换行后单选框图标可能和文字底部错位
如何让单选框label自动换行并撑开行高
Layui默认给.layui-form-item设了height: 40px，导致换行后内容被裁掉。只调label样式不够，得连带重置父级布局。
- 给对应
.layui-form-item加class，比如radio-wrap，避免全局污染 - CSS里写：
.radio-wrap .layui-form-radio span { display: block; white-space: normal; word-break: break-word; max-width: 220px; } - 同步重置
.radio-wrap的高度：height: auto !important;，不然内容撑开了，容器还卡在40px - 如果用了
lay-size="sm"，记得把max-width相应调小（比如160px），否则小尺寸下反而显得松散
长label和单选框图标错位怎么修
换行后常见现象：圆点图标垂直居中失效，文字顶到顶部，或者图标沉底——本质是Flex布局的align-items没对齐。
-
.layui-form-radio默认是display: flex; align-items: center;，但一旦span变block，子元素就不再按flex规则对齐 - 解决方案不是改span，而是把图标和文字都包进一个flex容器：
.layui-form-radio { display: inline-flex; align-items: flex-start; } - 再给图标加
margin-top: 4px微调，比依赖align-items: center更可控 - 移动端要注意：iOS Safari对
flex-start支持不稳定，可降级为align-items: baseline+padding-top: 2px
用templet自定义单选结构是否更可靠
当label长度差异大、或需插入图标/颜色标识时，官方radio组件的DOM结构太死板，templet是唯一能彻底解耦的方式。
- 不用
type="radio"，改用type="hidden"配合lay-filter手动绑定事件 - templet返回完整HTML：
<div class="custom-radio"><span class="icon"></span><span class="text">{{d.label}}</span></div> - 用
click监听+data-value存值，避开Layui的渲染逻辑干扰 - 注意：templet里不能用
lay-verify，校验得自己写form.on('submit')回调
label标签本身——它只是个壳，所有样式和行为都在.layui-form-radio及其子span上。改错地方，调一百遍CSS也没用。 
