Question

我试图编写一个jquery确认插件对话框，当包含新行时，它不会显示它们。关于如何渲染它们的任何想法？

示例：

$(document).ready(function() {
    $("#test").click( function() {
        $.confirm({
            theme: 'dark',
            title: 'Confirm Details',
            content: "This should \nbe a \nmulti-line \nstring",
            buttons: {
              confirm: function () {
              },
              cancel: function () {
            }
        }
    });
  });
});

JSFiddle：https://jsfiddle.net/pa5s4zmb/

Answer 1

选项1

其中一个解决方案是在警报内容上设置CSS，将white-space设置为pre-wrap。您可以使用以下方式执行此操作：

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
    white-space: pre-wrap;
}

这里有更新的小提琴：https://jsfiddle.net/pa5s4zmb/1/

选项2

或者，您可以将所有\n个字符替换为HTML警报中允许的<br>。

这可以这样做：

"This should \nbe a \nmulti-line \nstring".split('\n').join('<br>')

这里是用\n取代<br>的小提琴：https://jsfiddle.net/pa5s4zmb/2/

注意：我通常更喜欢在这里使用第二个选项，因为它不会影响库的CSS - 并且由于库的未来版本中的更改而导致破坏的可能性较小。

Answer 2

**replace "\n" from "<br/>" tag** 
content: "This should <br>be a <br>multi-line <br>string",

Answer 3

您需要使用<br>代替\n和/或&#13是文本文档中的换行符。 <br>是结构：

$(document).ready(function() {
    $("#test").click( function() {
        $.confirm({
            theme: 'dark',
            title: 'Confirm Details',
            content: "This should <br>be a <br>multi-line <br>string",
            buttons: {
              confirm: function () {
              },
              cancel: function () {
            }
        }
    });
  });
});

`\ n`字符在jquery确认对话框中没有呈现新行

3 个答案:

选项1

选项2