Layui单选框文字换行必须用templet，不能靠CSS强行覆盖；需在templet中返回带white-space:normal、word-break:break-word、padding和line-height的div，并处理空值、换行符及图标对齐问题。
layui单选框文字换行必须用templet，不能靠CSS强行覆盖
layui 的 radio 组件默认把整个选项（包括 label 文字）包裹在固定高度的容器里，且内部用了 white-space: nowrap 和内联 height，直接给 .layui-form-radio span 加 white-space: normal 基本无效——样式会被后续 JS 注入的内联 style 覆盖，或者被父级 line-height 截断。
templet 里返回带样式的 div 是唯一可靠方式
必须放弃原生 radio 的 label 渲染逻辑，改用 templet 手动构造可换行结构。关键点不是“让文字折行”，而是重建一个不受 layui 内部高度限制的容器。
- templet 函数里返回：
<div style="white-space:normal; word-break:break-word; padding:6px 0; line-height:1.6;">{{d.name}}</div> - 务必加
padding和line-height：原生 radio 行高约 28px，不设会文字贴边或重叠 - 别用
{{d.name}}直接插值——如果内容含 HTML 或换行符\n，得先处理：d.name.replace(/\n/g, '<br>') - 如果字段为空，templet 必须判空，否则渲染报错：
return d.name ? '...' : ''
换行后单选框图标对齐错位怎么修
文字变高后，左侧圆点图标（.layui-form-radio>i）默认垂直居中失效，常出现“图标上浮、文字下沉”现象。这不是 margin 问题，是 vertical-align 和容器 line-height 不匹配导致的。
- 在 templet 的
div样式里加：display:inline-flex; align-items:center;，让图标和文字自动对齐 - 或者保留块级结构，但显式控制图标位置：
.layui-form-radio>i { vertical-align: text-top; margin-top: -2px; } - 绝对不要给
.layui-form-radio整体设height: auto——它会影响所有未使用 templet 的 radio，破坏表单一致性
移动端小屏下换行文字撑出横向滚动条
文字换行后列宽被撑开，尤其在窄屏设备上，容易触发表格容器的 overflow-x: scroll，用户要左右拖才能看到单选框图标——这比不换行还糟。
- 给 templet 的容器加最大宽度：
max-width: 200px;（根据实际列宽调整） - 配合
word-break: break-word，避免长英文/数字串不折行 - 如果该列允许拖拽列宽，建议加
unresize: true，防止用户拉窄后每字一行 - 测试时务必在真机 Safari 和 Chrome 上验证，部分 iOS WebView 对
inline-flex支持不稳定，可降级为display:block+margin-top微调
