Javascript行/回车不起作用答案

【问题标题】：Javascript line/carriage returns not workingJavascript行/回车不起作用
【发布时间】：2013-05-20 20:34:46
【问题描述】：

我遇到了一个表面上看起来非常容易/尴尬的问题，但我现在不知所措。

函数涉及很多背景故事，但我会尽量保持简洁。出于格式化原因，我正在尝试插入回车符/换行符，但它们不起作用，我显然在沮丧中忽略了一些东西。

使用一些用户输入的信息来帮助创建一个应用程序，我有这个功能：

    function insertStaticData(group, title, subtitle, description, content, backgroundImage) {

    var newItem = { group: group, title: title, subtitle: subtitle, description: description, content: content, backgroundImage: backgroundImage };

    list.push(newItem);
}

用户输入不同的信息。很容易。最初，内容部分的格式非常难看，因为用户可以输入段落。因为我现在只是在测试，所以我重新格式化了他们的文本，如下所示：

insertStaticData(dataGroups[0], "Administration", "", "",
        "Person's Name \n"
        + "Principal \n"
        + "email@address.com \n\n"
        + "Another Name \n"
        + "Secretary\n"
        + "another.email@address.com", "http://www.imageurls/cf/images/map/map_right.gif");

如图所示，用户没有输入字幕或描述。这很好。但是，当我通过 Visual Studio 将此作为 Windows 8 应用程序进行调试时，无法识别行返回。我敢肯定我真的很愚蠢，但是什么给了？希望这不会太令人困惑。

【问题讨论】：

你想在哪里显示换行符？如果它在 HTML 元素中，则必须使用 <br>，而不是 \n。还是<textarea>？

标签： javascript windows-phone visual-studio-debugging

【解决方案1】：

正如 bfavaretto 已经评论的那样，如果这是用于 html，则需要使用 <br />。

更好的是，将每一行包装在 <p> 标记中，这样如果您想修改外观而无需更改代码，就可以应用 CSS 规则：

insertStaticData(dataGroups[0], "Administration", "", "",
    "<p>Person's Name</p>" +
    "<p>Principal</p>" + //etc.

您可以像这样制作一个包装元素来分隔规则：

insertStaticData(dataGroups[0], "Administration", "", "",
    "<div class='myClass'>" +
    "<p>Person's Name</p>" +
    //etc...
    + "</div>"

然后在 CSS 中：

.myClass { /* wrapper */ }
.myClass > p { /* per line */ }

【讨论】：