jQuery UI对话框文本是否有换行选项？

Question

我正在使用来自Pokemon的数据创建一个网站并尝试执行一个对话框。 我尝试在文本中使用JS换行符：

function alertBox(monster) {
    $("#dialog").dialog();
    $("#dialog").dialog("option", "title", monster);
    $("#dialog").text("Height: "  + pokemon.height[monster] + "\n" +
                      "Weight: " + pokemon.weight[monster]);
}

...而且我也尝试过使用html换行标记：

function alertBox(monster) {
    $("#dialog").dialog();
    $("#dialog").dialog("option", "title", monster);
    $("#dialog").text("Height: "  + pokemon.height[monster] + "<\br>" +
                      "Weight: " + pokemon.weight[monster]);
}

但似乎都没有返回我正在寻找的换行效果！ JS换行符只是一个空格，而html换行标记只是连接到字符串。 有没有办法在对话框文本中强制换行？

Answer 1

jQuery .text()函数自动转义HTML实体，因此您的<br />标记不再被解释为HTML，而是转换为转义文本。

要防止此HTML转义，您需要使用.html()而不是.text()来设置内容：

function alertBox(monster) {
    $("#dialog").dialog();
    $("#dialog").dialog("option", "title", monster);
    $("#dialog").html("Height: "  + pokemon.height[monster] + "<br />" +
                      "Weight: " + pokemon.weight[monster]);
}

Answer 2

考虑添加：

$("#dialog").css("white-space","pre-wrap");

这将使\\n显着，并且它将如此呈现。

或者，考虑使用一些实际的HTML。 例如，您的对话框可能是：

$("#dialog").html("<ul>" +
    "<li><b>Height:</b> "+pokemon.height[monster]+"</li>" +
    "<li><b>Weight:</b> "+pokemon.weight[monster]+"</li>" +
"</ul>");

对于更复杂的布局，我建议使用模板系统而不是将HTML硬编码到JavaScript中。

Answer 3

希望有助于了解text（）val（）和html（）的工作原理

 $(document).ready(function () { $("#dialog").html("Height: " + 11 + "<br>" + "Weight: " + 22); $("#dialog2").val("Height: " + 11 + "\\n" + "Weight: " + 22); $("#dialog3").text("Height: " + 11 + "\\n" + "Weight: " + 22); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="dialog"></div> <textarea rows="5" cols="20" name="text" id="dialog2"></textarea> <textarea rows="5" cols="20" name="text" id="dialog3"></textarea>