HTML - 前标记中的换行答案

【问题标题】：HTML - Break line in a pre tagHTML - 前标记中的换行
【发布时间】：2011-06-15 05:53:35
【问题描述】：

我正在尝试将文本区域中写入的文本（使用 jQuery 和 JS）复制到 pre 标记。但是，我不能根据需要引入尽可能多的换行符。例如，如果我按 Enter 一次，它会起作用并创建一个换行符，但如果我多次按 Enter，我将无法获得多个换行符。您知道为什么会发生这种情况，或者我该如何解决？

代码大致如下：

<textarea id="area" rows="5" cols="30"> </textarea> 
<pre id="area2" > </pre> <br/>

<script>
newText = $( '#area' ).val();
$( '#pre' ).text( newText); 
</script>`

textarea的id是#area，pre标签的id是#pre

【问题讨论】：

我正在尝试将其复制到 PRE 标记..
您好 - 您可以使用“编辑”按钮将额外的细节编辑到问题中，而不是将其添加为评论。
您能否更具体一些 - 例如在示例中准确包含您希望发生的事情并包含代码和您观察到的内容？
在 IE、Chrome 和 Firefox 上工作得很好：jsfiddle.net/yahavbr/tQn4h 只需输入一些内容，输入任意数量的 Enter，然后单击 Copy 并查看新行被保留。
如果“工作正常”是指“根本不工作”，那么我同意。可能是浏览器问题。当我输入“a \n\n\n b”时，我在小提琴中看到“a（多个空格）b”。

标签： jquery newline line-breaks

【解决方案1】：

你试过了吗

$( '#pre' ).html( newText);

相反？可能是.text 去掉了\n 的

如果这不起作用，我在 Stack Overflow 上找到了类似问题的一些答案，这可能对你有用。然而这有点痛苦，因为你必须编写一个相当大的函数来检测换行符并替换它们：

    //Based off <textarea id="text" cols="50" rows="5" style="overflow: scroll">This is 
a test sentence, with no newline characters in it, but with an automatically wrapped sentence that spans three lines.</textarea>
    var words = $("#text").val().split(" ");
    var cols = $("#text").attr("cols");
    var text = "";
    var lineLength = 0;
    for (var i = 0; i < words.length; i++) {
        var word = words[i];
        if ((lineLength + word.length + 1) > cols) {
            text += "\n";
            lineLength = 0;
        } else if (lineLength > 0) {
            text += " ";
            lineLength++;
        }
        text += word;
        lineLength += word.length;
    }
    $( '#pre' ).text(text);
    //Alerts:
    //This is a test sentence, with no newline
    //characters in it, but with an automatically
    //wrapped sentence that spans three lines.

【讨论】：

【解决方案2】：

我在使用 IE7 时遇到了这个问题。它不会在 pre 标记中显示多个换行符。

【讨论】：