Layui弹出层layer.confirm怎样调整弹窗内容的行高

layer.confirm弹窗行高不生效主因是内容被包裹进layui-layer-content容器导致内联样式失效；应通过skin参数添加自定义class，再用CSS选择器如.my-confirm-tall .layui-layer-content设置line-height并配合padding调整。

layer.confirm 弹窗内容行高失效的常见原因

直接为 content 字符串添加 line-height 行内样式往往不会生效，因为 layer 会把内容放入具有固定 class 的容器中（例如 layui-layer-content），随后通过层叠规则覆盖原有样式；因此被修改的并非最终渲染节点。

用 skin + CSS 覆盖 layui 默认行高

layer 提供了 skin 参数来添加自定义 class，这种方式最稳妥，也不会影响其他弹窗：

• 为弹窗设置专属 class，例如 my-confirm-tall
• 在全局 CSS 或页面 style 中编写权重更高的规则，并指向 .layui-layer-content 子元素
• 避免使用 !important，选择器权重已经足够（例如 .my-confirm-tall .layui-layer-content）

layer.confirm('确定要删除吗？', {  skin: 'my-confirm-tall',  yes() { /* ... */ }});

CSS 示例：

.my-confirm-tall .layui-layer-content {  line-height: 2.2;  padding: 20px 24px; /* 可同步调整上下内边距，让文字更居中 */}

传入 DOM 节点后控制行高的方法

如果先用 jQuery 或原生 DOM 创建内容节点，再把它传入 content，就应把行高直接设置在该节点上，同时确认 layer 已将其正确插入内容区域：

• 行高不要只设置在父容器上，而要作用于直接包裹文字的容器（例如 <div class="msg">...</div>）
• layer 会把节点 append 到 .layui-layer-content，因此 .msg 的样式依然可能受到继承影响
• 建议写成 .my-confirm-tall .msg { line-height: 2; }，以便和前一种方式统一维护

示例：

const $msg = $('<div class="msg">此操作不可撤销<br>请确认后继续</div>');layer.confirm($msg, { skin: 'my-confirm-tall' });

移动端适配行高时的额外注意事项

安卓微信、iOS Safari 对 line-height 计算方式存在差异，特别是包含中文或换行文本时，容易发生截断或错位：

• 不要使用无单位数值（例如 line-height: 2），应改为 em 或者 px（例如 line-height: 1.8em）
• 当内容包含 <br>时，要确认父容器 white-space: normal（layui 默认如此，但自定义 skin 可能将其覆盖）
• 真机测试需要重点检查多行文本的最后一行是否被裁切，这种现象通常由 padding 与 line-height 组合后造成容器高度计算偏差

此时不要只调整 line-height，同时微调 padding-top / padding-bottom 会更加可靠。

行高看似只是小问题，却会与 font-size、padding、box-sizing 乃至 iOS 字体渲染同时变化，稍有不慎就可能改动一处而破坏三处。建议全部自定义弹窗统一采用 skin + 外部 CSS 进行控制，不要在 content 字符串中加入 style。