CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user6332430
user6332430

Reputation: 460

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 (line 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.

Upvotes: 0

Views: 332

Answers (7)

Bhanu Pratap
Bhanu Pratap

Reputation: 1761

Try this for a 'cross-browser' solution.

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

Upvotes: 1

Federico
Federico

Reputation: 1422

You need to space letters or they won't break into a new line.

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

$("textarea").blur();
div{width:200px}
textarea{width:200px;}
<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>

Upvotes: 0

SimplePixels
SimplePixels

Reputation: 157

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

$("textarea").blur();
div {
  width: 141px;
  word-break: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div></div>

<textarea>test123123123123123123123123123123 teateafsdsafsdafaasdf</textarea>

This comes close to being the same as the textarea. You could use height in combination with overflow: hidden on the div to limit the height.

the word-break: break-all breaks the line in between any two letters

Upvotes: 1

Duha
Duha

Reputation: 829

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

Upvotes: 0

Geeky
Geeky

Reputation: 7498

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

Upvotes: 5

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

Use word-break: break-word; on <div>.

Look at the snippet below:

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

$("textarea").blur();
div {
  width: 141px;
  word-break: break-word;
  font-size: 14px;
  margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div></div>

<textarea>test123123123123123123123123123123 teateafsdsafsdafaasdf</textarea>

Hope this helps!

Upvotes: 1

Mobius
Mobius

Reputation: 2896

If you want to show line breaks, you can use a <pre> tag. this is for pre-formatted text like you have.

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>

Upvotes: -1

Related Questions