Will Will - 24 days ago 20
CSS Question

line breaks in Div



$("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>





I would like the content in the Div to appear to be exactly the same as in the textarea (link breaks instead of showing all in one line).

I've tried to set the height and width but that gives me a horizontal scroll bar.

Answer

Use word-break:break-all and give some width to the div it should work check this snippet

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

$("textarea").blur();
div,textarea{
  word-break:break-all;
  width:220px;
  border:1px solid black;
  margin:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

<textarea>test123123123123123123123123123123 teateafsdsafsdafaasdf</textarea>

Hope this helps

Comments