skip to Main Content

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.nnYour goals are important to us and therefor we work hard to ensure these are reached by deliveringn 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.nnYour goals are important to us and therefor we work hard to ensure these are reached by deliveringn 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.

2

Answers


  1. Add rn to code before the text you want to show in a new line

    A comprehensive explanation for the meaning of r and n here

    Login or Signup to reply.
  2. 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.nnYour goals are important to us and therefor we work hard to ensure these are reached by deliveringn 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search