Javascript print on new line

Question

I need help displaying parts of a text on a new line.

Full Code:

$(function() {

  let dictionary = {
    "english": {
      "_aboutus": "At 3o, we offer a variety of web services such as graphic design, web development, hosting, SEO and much more, that will ensure that your online presence will be noticed.\n\nYour goals are important to us and therefor we work hard to ensure these are reached by delivering\n you our services with the highest quality and excellence possible. Once a client with us, is always a client.\n We are always here to continue to assist you in the future with our excellent support.",
      "_aboutustitle": "ABOUT US",
      "_navaboutus": "ABOUT US",
      "_navservices": "OUR SERVICES",
      "_navgetintouch": "GET IN TOUCH",
      "_barservices": "OUR SERVICES",
      "_bargetintouch": "GET IN TOUCH",
      "_footeraboutustitle": "ABOUT US",
      "_footeraboutus": "At 3o, we offer a variety of web services such as graphic design, web development, hosting, SEO and much more, that will ensure that your online presence will be noticed.",
      "_footergetintouchtitle": "SOCIAL LINKS",
      "_footerquicklinkstitle": "QUICK LINKS",
      "_footernaarboven": "Get Back To The Top",
      "_footeraboutustxt": "About Us",
      "_footergetintouchtxt": "Get In Touch",
      "_footerservicestxt": "Our Services",
      "_contactbutton": "Send"
    }
  };

  $('.display').text(dictionary.english._aboutus);
});

<section class='display'></section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Specific code with text that needs new lines.

"_aboutus": "At 3o, we offer a variety of web services such as graphic design, web development, hosting, SEO and much more, that will ensure that your online presence will be noticed.\n\nYour goals are important to us and therefor we work hard to ensure these are reached by delivering\n you our services with the highest quality and excellence possible. Once a client with us, is always a client.\n We are always here to continue to assist you in the future with our excellent support.",

As you can see above I have tried using \n but it doesn't work. If anyone could help me and explain how I can start new lines in the text above I'd greatly appreciate it.

It depends: where do you want the line break to be? If you're going to display it in a textarea, use `\n`. If you're going to print it in HTML, you will have to use `
` tags. — Terry, Mar 09 '19 at 10:16
Possible duplicate of [How do I create a new line in Javascript?](https://stackoverflow.com/questions/5758161/how-do-i-create-a-new-line-in-javascript) — Basel Issmail, Mar 09 '19 at 10:17
Bro u can chk this thread => https://stackoverflow.com/questions/5758161/how-do-i-create-a-new-line-in-javascript — Speedy11, Mar 09 '19 at 10:21
I'm trying to start new lines in this part but it is not working: "_aboutus": "At 3o, we offer a variety of web services such as graphic design, web development, hosting, SEO and much more, that will ensure that your online presence will be noticed.\n\nYour goals are important to us and therefor we work hard to ensure these are reached by delivering\n you our services with the highest quality and excellence possible. Once a client with us, is always a client.\n We are always here to continue to assist you in the future with our excellent support.", — 0-DAY, Mar 09 '19 at 10:42
@0-DAY Please, read the comments pointing you to another threads with the same problem as you. Thank you. — Jorge Fuentes González, Mar 09 '19 at 10:47
The code you've provided (a) doesn't **attempt** to *display* the data and (b) doesn't compile. You should provide a [mcve]. — Quentin, Mar 09 '19 at 10:48

score 0 · Answer 1 · edited Mar 09 '19 at 14:00

0

Add \r\n to code before the text you want to show in a new line

A comprehensive explanation for the meaning of \r and \n here

edited Mar 09 '19 at 14:00

pranav

83
1
6

answered Mar 09 '19 at 12:17

Marsidi

11
5

score 0 · Answer 2 · answered Mar 09 '19 at 18:05

Three Ways to Display Line Breaks in DOM

It all depends on what method or property is used and to what type of element the string is parsed to.

For most DOM methods and properties replace each \n with <br> in the string beforehand.

var br_aboutus = _aboutus.replace(/\n/g, '<br>');
node.insertAdjacentHTML('beforeend', br_aboutus);

Or assign the string to the .value of a <textarea>.
```
node.value = _aboutus;
```
Or .innerText which is the best solution.
```
node.innerText = _aboutus
```

Demo

var _aboutus = `At 3o, we offer a variety of web services such as graphic design, web development, hosting, SEO and much more, that will ensure that your online presence will be noticed.\n\nYour goals are important to us and therefor we work hard to ensure these are reached by delivering\n you our services with the highest quality and excellence possible. Once a client with us, is always a client.\n We are always here to continue to assist you in the future with our excellent support.`;

var p = document.querySelectorAll('p');

var ta = document.querySelectorAll('textarea');

var br_aboutus = _aboutus.replace(/\n/g, '<br>');

p[0].insertAdjacentHTML('beforeend', br_aboutus);

p[1].innerText = _aboutus;

ta[0].value = _aboutus;

code {
  background: rgba(0, 128, 255, 0.3);
}

samp * {
  display: block;
  margin-top: 10px;
  background: rgba(0, 128, 0, 0.1);
  padding: 5px;
}

<dl>
  <dt>Most methods and properties.<br>Replace <code>\n</code> with <code>&lt;br&gt;</code>.</dt>
  <dd><samp><p></p></samp></dd>
  <hr>
  <dt><code>.value</code> of <code>&lt;textarea&gt;</code></dt>
  <dd><samp><textarea rows='12' cols='50'></textarea></samp></dd>
  <hr>
  <dt><code>.innerText</code></dt>
  <dd><samp><p></p></samp></dd>
</dl>

Javascript print on new line

2 Answers2

Three Ways to Display Line Breaks in DOM

Demo