在新行上打印JavaScript

Question

我需要帮助在新行上显示部分文本。

完整代码：

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

带有需要换行的文本的特定代码。

"_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.",

正如您在上面看到的，我尝试使用\ n，但是它不起作用。 如果有人可以帮助我并解释如何在上面的文本中添加新行，我将不胜感激。

Answer 1

在要换行显示的文本之前添加 \ r \ n 进行编码

对\r和\n here的含义的全面解释

Answer 2

在DOM中显示换行符的三种方法

这全部取决于使用哪种方法或属性以及将字符串解析为哪种元素。

• 对于大多数DOM方法和属性，事先将字符串中的每个\n替换为<br>。

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

• 或将字符串分配给.value的{​​{1}}。

  <textarea>

• 或node.value = _aboutus; 是最佳解决方案。

  .innerText

---

演示

node.innerText = _aboutus

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;
}