SweetAlert2弹窗text内容无法换行的问题咨询及解决方案求助

嘿，我之前用SweetAlert2的时候也踩过一模一样的坑！你遇到的问题其实是因为text参数只支持纯文本内容，不会解析HTML标签（比如<br>），也不会识别\n这种换行符。给你几个简单好用的解决方案：

方案一：改用html参数替代text #

这是最直接的解决办法，把原来的text换成html，这样HTML标签就能正常被解析了，你的<br>自然就能实现换行。修改后的代码如下：

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script type="text/javascript">
$('.show_confirm').click(function(e) {
    var form = $(this).closest("form");
    var name = $(this).data("name");
    e.preventDefault();

    Swal.fire({
        title: `Terminare la modalità training ?`,
        // 这里把text换成html
        html: 'Terminando la modalità training si passerà alla modalità REAL e verranno:' + "<br>" + '1. azzerati gli esiti e relativi KPI nella dashboard',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: 'rgba(244, 116, 78, 1)',
        cancelButtonColor: 'lightgrey',
        confirmButtonText: 'Termina',
        cancelButtonText: 'Annulla'
    }).then((result) => {
        if (result.isConfirmed) {
            e.preventDefault();
            form.submit();
        };
    })
});
</script>

方案二：用模板字符串配合换行符（适合纯文本场景） #

如果你不想用HTML标签，也可以用ES6的模板字符串（反引号`）直接写换行，不过这时候要确保内容是纯文本，不需要HTML解析：

Swal.fire({
    title: `Terminare la modalità training ?`,
    text: `Terminando la modalità training si passerà alla modalità REAL e verranno:
1. azzerati gli esiti e relativi KPI nella dashboard`,
    // 其他参数不变...
})

方案三：开启allowEscapeHtml（不推荐，仅兼容旧场景） #

如果因为某些原因必须用text参数，可以设置allowEscapeHtml: true，这样SweetAlert2会解析text里的HTML标签。不过官方更推荐用html参数，因为allowEscapeHtml可能带来潜在的XSS风险，所以谨慎使用：

Swal.fire({
    title: `Terminare la modalità training ?`,
    text: 'Terminando la modalità training si passerà alla modalità REAL e verranno:' + "<br>" + '1. azzerati gli esiti e relativi KPI nella dashboard',
    allowEscapeHtml: true,
    // 其他参数不变...
})

试试上面的方法，应该就能解决你的换行问题啦！

备注：内容来源于stack exchange，提问作者Moreno