Question

＆＃13;

$("textarea").blur(function() {
  $("div").html($("textarea").val());
});

$("textarea").blur();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div></div>

<textarea>test123123123123123123123123123123 teateafsdsafsdafaasdf</textarea>

＆＃13;

我希望Div中的内容看起来与textarea中的内容完全相同（换行符而不是在一行中显示所有内容）。

我试图设置高度和宽度，但这给了我一个水平滚动条。

Answer 1

使用word-break：break-all并为它应该工作的div赋予一些宽度检查此代码段

＆＃13;

$("textarea").blur(function() {
  $("div").html($("textarea").val());
});

$("textarea").blur();

＆＃13;

div,textarea{
  word-break:break-all;
  width:220px;
  border:1px solid black;
  margin:10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

<textarea>test123123123123123123123123123123 teateafsdsafsdafaasdf</textarea>

＆＃13;

希望这有帮助

Answer 2

在word-break: break-word;上使用<div>。

请看下面的代码：

＆＃13;

$("textarea").blur(function() {
  $("div").html($("textarea").val());
});

$("textarea").blur();

＆＃13;

div {
  width: 141px;
  word-break: break-word;
  font-size: 14px;
  margin-bottom: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div></div>

<textarea>test123123123123123123123123123123 teateafsdsafsdafaasdf</textarea>

＆＃13;

希望这有帮助！

Answer 3

＆＃13;

$("textarea").blur(function() {
  $("div").html($("textarea").val());
});

$("textarea").blur();

＆＃13;

div {
  width: 141px;
  word-break: break-word;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div></div>

<textarea>test123123123123123123123123123123 teateafsdsafsdafaasdf</textarea>

＆＃13;

这接近与textarea相同。您可以将高度与溢出结合使用：隐藏在div上以限制高度。

分词：break-all打破任意两个字母之间的界线

Answer 4

尝试使用“跨浏览器”解决方案。

 div {
        width: 220px;
        -ms-word-break: break-all;
        word-break: break-all;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }

Answer 5

$("textarea").blur(function() {
  $("div").html($("textarea").val());
});

$("textarea").blur();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div></div>

<textarea>test123123123123123123123123123123 &#13;&#10;teateafsdsafsdafaasdf</textarea>

Answer 6

你需要留出字母，否则他们不会闯入新的一行。

＆＃13;

$("textarea").blur(function() {
  $("div").html($("textarea").val());
});

$("textarea").blur();

＆＃13;

div{width:200px}
textarea{width:200px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div></div>

<textarea>t e s t 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3</textarea>

＆＃13;

Answer 7

如果要显示换行符，可以使用<pre>标记。这适用于您预先格式化的文本。

function copy(){
    $("pre").html($("textarea").val());  
}

$("textarea").on('input',copy);
copy()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<pre></pre>

<textarea cols="80">test123123123123123123123123123123 teateafsdsafsdafaasdf</textarea>

Div中的换行符

7 个答案: