HTML - 在pre标签中如何换行

Question

我正在尝试使用jQuery和JS将textarea中的文本复制到pre标签中。 但是，我无法引入我想要的大量换行符。例如，如果我按一次Enter键，它可以工作并创建一个换行符，但是如果我按多次Enter键，我就无法获得多个换行符。您知道为什么会发生这种情况，或者我该如何解决它吗？

代码基本上像这样：

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

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

的id是#area，<pre>标签的id是#pre。</pre>

- antonis

---

我正在尝试将它复制到一个PRE标签中.. - antonis

你好 - 你可以使用“编辑”按钮将额外的细节编辑到问题中，而不是将其作为评论添加。 - Rup

你能更具体一些吗？比如在示例中包括您想要发生的事情、包括代码和您观察到的内容。 - Eamon Nerbonne

在IE、Chrome和Firefox上运行正常：http://jsfiddle.net/yahavbr/tQn4h/ 只需输入一些内容，添加任意多个换行符，点击复制并查看新行是否被保留。 - Shadow The Spring Wizard

如果你所说的“正常工作”是指“完全不工作”，那我同意。也许这是一个浏览器问题。当我输入“a \n\n\n b”时，在fiddle中我看到的是“a（多个空格）b”。 - DwB

@antonis和Dwb：你们能尝试使用值abc\n，abc\n\n和abc\n\ncba来触发警报newText.length吗？ - Salman A

Answer 1

我在IE7中遇到了这个问题。它不能在pre标签中显示超过一个换行符。

- Carles Barrobés

Answer 2

你尝试过做吗？

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

这是不是应该使用.text而不是.html，因为.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.

- thorsten codeho