0

I try to display a multi-lined text but it always apears as one line.

For example: 

var text ="line 1. \n line 2. \n line 3."

It it supposed to be displayed like :

line 1.

line 2.

line 3.

but instead I end up with

line 1. line 2. line 3.

in a rendered html page.

I tryed jquery text and html methods but not working.

Even through angularjs, it is always the same.

$('#element').text(text);

$('#element').html(text);

or

<div>{{ text  }}</div>

Isn't there a way to get what I'm expecting?

Buu97
  • 158
  • 2
  • 15
  • 1
    Possible duplicate of [jQuery convert line breaks to br (nl2br equivalent)](https://stackoverflow.com/questions/2919337/jquery-convert-line-breaks-to-br-nl2br-equivalent) – Blue Jul 29 '18 at 20:46
  • 1
    try to use var text ="line 1.
    line 2.
    line 3." and: $('#element').text(text);     – bradley546994 Jul 29 '18 at 20:47
  • Another possible duplicate: https://stackoverflow.com/questions/4535888/jquery-text-and-newlines – Blue Jul 29 '18 at 20:47
  • @bradley546994 That wont work. They would need to use `.html()` in that case. – Blue Jul 29 '18 at 20:48
  • ahh right :) $('#element').html(text); – bradley546994 Jul 29 '18 at 20:49
  • If you want to keep your formatting and indentation along with line break, wrap the *html* content into a **pre** tag, and apply that html to DOM usin *.html(...)* – Koushik Chatterjee Jul 29 '18 at 20:56
  • Thanks for advices. The .html() method made it but the element must be 
     tag and not a 
    . But I still have the angularjs's problem.
     – Buu97 Jul 29 '18 at 20:58

3 Answers3

0

Try Something like 

<div class="angular-with-newlines">
    {{ text  }}
</div>

css

/* in the css file or in a style block */
.angular-with-newlines {
    white-space: pre-wrap;
}

This will use newlines and whitespace as given, but also break content at the content boundaries. More information about the white-space property can be found here:

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

If you want to break on newlines, but also collapse multiple spaces or white space preceeding the text (very similar to the original browser behaviour), you can use:

white-space: pre-line;
Pawan Singh
  • 824
  • 6
  • 13
  • Using the css white-space property worked. Thank You. – Buu97 Jul 29 '18 at 21:10
  • This is a pretty clear duplicate. You should have flagged to close instead. Additionally, you should avoid gender specific words, as it could have been a female who downvoted your post. – Blue Jul 29 '18 at 21:53
  • @FrankerZ Sorry about gender specific word and being an newbie here just saw the question and started answering it, from next time I will for sure see if question is a duplicate – Pawan Singh Jul 30 '18 at 06:59
0

May be, this is what you want...

<textarea id="text"></textarea>
<p id="text2"></p>
<button onclick="multi_line_textarea()">on textarea</button>
<button onclick="multi_line_para()">on paragraph</button>


   <script>
            function multi_line_textarea(){
                var text = "line 1. \nline 2. \nline 3.";
                var el = document.getElementById('text');
                el.innerHTML = text;
            }
            function multi_line_para(){
                var text2 = "line 1. <br/>line 2. <br/>line 3.";
                var el2 = document.getElementById('text2');
                el2.innerHTML = text2;
            }
   </script>

Here's a jsFiddle:https://jsfiddle.net/p984fd1m/2/

Hope that helps..

Mithu Mondal
  • 265
  • 2
  • 11
0

Try like this. <p style="white-space: pre-line;">{{ text }}</p>

optiman
  • 93
  • 7