Div中的换行符

时间:2016-11-10 15:25:37

标签: javascript jquery html css



$("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;
&#13;
&#13;

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

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

7 个答案:

答案 0 :(得分:5)

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

&#13;
&#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;
&#13;
&#13;

希望这有帮助

答案 1 :(得分:1)

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

请看下面的代码:

&#13;
&#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;
&#13;
&#13;

希望这有帮助!

答案 2 :(得分:1)

&#13;
&#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;
&#13;
&#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 &#13;&#10;teateafsdsafsdafaasdf</textarea>

答案 5 :(得分:0)

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

&#13;
&#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;
&#13;
&#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>