How can I insert new line/carriage returns into an element.textContent?

by

I know this question posted long time ago.

I had similar problem few days ago, passing value from web service in json format and place it in table cell contentText.

Because value is passed in format, for example, "text row1\r\ntext row2" and so on.

For new line in textContent You have to use \r\n and, finally, I had to use css white-space: pre-line; (Text will wrap when necessary, and on line breaks) and everything goes fine.

Or, You can use only white-space: pre; and then text will wrap only on line breaks (in this case \r\n).

So, there is example how to solve it with wrapping text only on line breaks :

var h1 = document.createElement("h1");

//setting this css style solving problem with new line in textContent
h1.setAttribute('style', 'white-space: pre;');

//add \r\n in text everywhere You want for line-break (new line)
h1.textContent = "This is a very long string and I would like to insert a carriage return \r\n...";
h1.textContent += "moreover, I would like to insert another carriage return \r\n...";
h1.textContent += "so this text will display in a new line";

document.body.appendChild(h1);

More Related Contents:

  1. Escaping HTML strings with jQuery
  2. Escaping Strings in JavaScript
  3. How to escape JavaScript in JSP?
  4. Making a javascript string sql friendly
  5. How do I escape a string inside JavaScript code inside an onClick handler?
  6. Javascript – Replacing the escape character in a string literal
  7. How to check whether a string contains a substring in JavaScript?
  8. How to force JS to do math instead of putting two strings together [duplicate]
  9. Count the number of occurrences of a character in a string in Javascript
  10. Is there a built in way to convert a comma-separated string to an array?
  11. Converting an object to a string
  12. endsWith in JavaScript
  13. Why does JavaScript handle the plus and minus operators between strings and numbers differently?
  14. What’s the best way to convert a number to a string in JavaScript?
  15. Check whether an input string contains a number in javascript
  16. List of all characters that should be escaped before put in to RegEx?
  17. Using JavaScript to perform text matches with/without accented characters
  18. How does adding String with Integer work in JavaScript? [duplicate]
  19. Remove empty strings from array while keeping record Without Loop?
  20. Replace string in javascript array
  21. JavaScript – Replace all commas in a string [duplicate]
  22. Replacing accented characters with plain ascii ones [duplicate]
  23. Create a string of variable length, filled with a repeated character
  24. Convert JavaScript String to be all lowercase
  25. String split returns an array with more elements than expected (empty elements)
  26. Best way to parse HTML in Javascript
  27. Put quotes around a variable string in JavaScript
  28. compare strings and get end difference
  29. Javascript – Template Strings Don’t Pretty Print Objects
  30. Find and replace nth occurrence of [bracketed] expression in string

Leave a Comment