Javascript文本换行问题求助：\n无法生效的解决方法

Hey, I get it—you tried using \n to add line breaks to your text, but it's not working at all. Let's break this down and fix it quickly.

The Root Cause #

You're using jQuery's text() method to insert your content into the .display element. Here's the key issue: the text() method treats everything as plain text. When HTML renders plain text, it ignores line breaks like \n (and even multiple spaces) and collapses them into a single space. Your \n characters exist in the DOM, but the browser just isn't displaying them as line breaks.

Two Simple Solutions #

Solution 1: Use CSS to Preserve Line Breaks #

This is the easiest fix if you want to keep using text(). Just add a CSS rule that tells the browser to respect line breaks in the text:

.display {
  white-space: pre-line;
}

• pre-line preserves your \n line breaks while still collapsing extra spaces, which gives you clean, natural formatting.

Here's your full code with this fix:

<style>
.display {
  white-space: pre-line;
}
</style>
<section class='display'></section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(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); 
}); 
</script>

Solution 2: Replace \n with HTML <br> Tags #

If you prefer handling this with JavaScript instead of CSS, replace all \n characters with HTML <br> tags and use jQuery's html() method (since html() parses HTML tags, unlike text()):

$('.display').html(dictionary.english._aboutus.replace(/\n/g, '<br>'));

The replace(/\n/g, '<br>') uses a regular expression to swap every \n for a <br> tag, which the browser will render as a line break.

Here's your full code with this fix:

<section class='display'></section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(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').html(dictionary.english._aboutus.replace(/\n/g, '<br>')); 
}); 
</script>

Which Solution Should You Choose? #

• Go with the CSS method if you want to keep your content as plain text and let the browser handle line break rendering.
• Choose the JavaScript/HTML method if you need more control over future formatting (like adding bold text or links later).

内容的提问来源于stack exchange，提问作者0-DAY