Question

我试图将用textarea写的文本（用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

Answer 1

我在IE7中遇到了这个问题。它不会在预标签中显示更多的换行符。

Answer 2

你试过吗

$( '#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.

HTML - 在预标签中断行

2 个答案: