layui单选框label太长如何处理

必须修改.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，根本没动到真正起作用的节点。

1. 必须定位到.layui-form-radio span（单选）或.layui-form-checkbox span（复选），它们才是包裹文字的实际容器
2. 加display: inline-block或display: block，否则white-space: normal对inline元素无效
3. 同时设max-width: 100%或具体像素值（如max-width: 200px），否则文字会无限撑宽容器
4. 别漏vertical-align: top，否则换行后单选框图标可能和文字底部错位

如何让单选框label自动换行并撑开行高

Layui默认给.layui-form-item设了height: 40px，导致换行后内容被裁掉。只调label样式不够，得连带重置父级布局。

1. 给对应.layui-form-item加class，比如radio-wrap，避免全局污染
2. CSS里写：.radio-wrap .layui-form-radio span { display: block; white-space: normal; word-break: break-word; max-width: 220px; }
3. 同步重置.radio-wrap的高度：height: auto !important;，不然内容撑开了，容器还卡在40px
4. 如果用了lay-size="sm"，记得把max-width相应调小（比如160px），否则小尺寸下反而显得松散

长label和单选框图标错位怎么修

换行后常见现象：圆点图标垂直居中失效，文字顶到顶部，或者图标沉底——本质是Flex布局的align-items没对齐。

1. .layui-form-radio默认是display: flex; align-items: center;，但一旦span变block，子元素就不再按flex规则对齐
2. 解决方案不是改span，而是把图标和文字都包进一个flex容器：.layui-form-radio { display: inline-flex; align-items: flex-start; }
3. 再给图标加margin-top: 4px微调，比依赖align-items: center更可控
4. 移动端要注意：iOS Safari对flex-start支持不稳定，可降级为align-items: baseline + padding-top: 2px

用templet自定义单选结构是否更可靠

当label长度差异大、或需插入图标/颜色标识时，最新radio组件的DOM结构太死板，templet是唯一能彻底解耦的方式。

1. 不用type="radio"，改用type="hidden"配合lay-filter手动绑定事件
2. templet返回完整HTML：<div class="custom-radio"><span class="icon"></span><span class="text">{{d.label}}</span></div>
3. 用click监听+data-value存值，避开Layui的渲染逻辑干扰
4. 注意：templet里不能用lay-verify，校验得自己写form.on('submit')回调

真正要稳，别碰label标签本身——它只是个壳，所有样式和行为都在.layui-form-radio及其子span上。改错地方，调一百遍CSS也没用。