javascript - Line break not working with jQuery .text() - Stack Overflow

admin管理员组

文章数量:1335434

I have the following code:-

function data(x) {
     var dataList = "";
     for (var key in obj) {
          dataList += key + ": " + obj[key] + "\n"
     }
     $('#modalText').text(dataList);
     document.getElementById('dataModal').style.display='block';
}

And it populates the HTML like this:

<p id="dataList"></p>

Although I have a '\n' concatenated to my string with each iteration of the loop, I cannot get the line break after each key/value pair to show in my modal. I have also tried the jQuery .append() function instead of .text(), to no avail.

My variable, dataList, prints in the console with proper line breaks, like this:

key: 123
time: 12:00
department: taxes

But when printed in the modal, there are no line breaks:

key: 123 time: 12:00 department: taxes

How can I get it to show in my modal with a new line break after each key-value pair, as it shows in the console?

I have the following code:-

function data(x) {
     var dataList = "";
     for (var key in obj) {
          dataList += key + ": " + obj[key] + "\n"
     }
     $('#modalText').text(dataList);
     document.getElementById('dataModal').style.display='block';
}

And it populates the HTML like this:

<p id="dataList"></p>

Although I have a '\n' concatenated to my string with each iteration of the loop, I cannot get the line break after each key/value pair to show in my modal. I have also tried the jQuery .append() function instead of .text(), to no avail.

My variable, dataList, prints in the console with proper line breaks, like this:

key: 123
time: 12:00
department: taxes

But when printed in the modal, there are no line breaks:

key: 123 time: 12:00 department: taxes

How can I get it to show in my modal with a new line break after each key-value pair, as it shows in the console?

• javascript
• jquery
• loops
• key-value
• line-breaks

Share Improve this question Follow edited Jul 24, 2017 at 18:40 Death-is-the-real-truth 72.3k1010 gold badges5757 silver badges104104 bronze badges asked Jul 24, 2017 at 18:19 bobbob 63955 silver badges2525 bronze badges 2

• Try typing a line break into the raw HTML; you'll see that it doesn't show up when shown in a browser. Same deal when added via script. – Heretic Monkey Commented Jul 24, 2017 at 18:25
• 1 In a modal, there won't be a line break via a newline character -- the contents of a modal (unless it's a textarea) will be pure HTML and newlines aren't. Is there a reason you aren't using .html() instead of .text() ? – Snowmonkey Commented Jul 24, 2017 at 18:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Whitespace means nothing in HTML. You need to either use <br/> and set the .html(), or you need to add a white-space: pre to your dataList <p> tag. Using pre or pre-wrap will respect whitespace (and therefore \n characters)

simply <br>is sufficient to get line break rather "/n" as shown in below code.

 function data(x) {
 var dataList = "";
 for (var key in obj) {
      dataList += key + ": " + obj[key] + "<br>"
 }
 $('#modalText').text(dataList);
 document.getElementById('dataModal').style.display='block';

}

本文标签： javascriptLine break not working with jQuery text()Stack Overflow