$("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 teateafsdsafsdafaasdf</textarea>
&#13;
我希望Div中的内容看起来与textarea中的内容完全相同(换行符而不是在一行中显示所有内容)。
我试图设置高度和宽度,但这给了我一个水平滚动条。
答案 0 :(得分:5)
使用word-break:break-all并为它应该工作的div赋予一些宽度 检查此代码段
$("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;
希望这有帮助
答案 1 :(得分:1)
在word-break: break-word;
上使用<div>
。
请看下面的代码:
$("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;
希望这有帮助!
答案 2 :(得分:1)
$("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打破任意两个字母之间的界线
答案 3 :(得分:1)
尝试使用“跨浏览器”解决方案。
div {
width: 220px;
-ms-word-break: break-all;
word-break: break-all;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
答案 4 :(得分:0)
$("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 teateafsdsafsdafaasdf</textarea>
答案 5 :(得分:0)
你需要留出字母,否则他们不会闯入新的一行。
$("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;
答案 6 :(得分:-1)
如果要显示换行符,可以使用<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>