带有textContent的自动换行

Question

I am trying to insert a long text into HTML via Javascript. Here is my code.

  function introStory(){
  var txt = document.getElementById("paragraph");
  txt.setAttribute('style', 'white-space: pre;');
  txt.textContent = ""
  txt.textContent += "\"Kill them all!\"\r\n\r\nThey came without warning. The humans, beasts, and holy hosts attacks my village and family. They slaughtered all my neighbors, killed my mother and my father."
}

For CSS:

#paragraph{
     overflow: hidden;
     border: 1px solid rgba(255,255,255,0.7);
     text-align: left;
     word-wrap: break-word;
     overflow-wrap: break-word;
 }

The text inserted into the div named paragraph doesn't break word as I want it to be. It continues to outside of the designated div. Am I doing something wrong here?

Answer 1

Use white-space: pre-wrap; or white-space: pre-line; instead of white-space: pre;

Stack snippet

 function introStory(){ var txt = document.getElementById("paragraph"); txt.setAttribute('style', 'white-space: pre-wrap;'); txt.textContent = "" txt.textContent += "\\"Kill them all!\\"\\r\\n\\r\\nThey came without warning. The humans, beasts, and holy hosts attacks my village and family. They slaughtered all my neighbors, killed my mother and my father." } introStory(); 

 #paragraph{ overflow: hidden; border: 1px solid rgba(255,255,255,0.7); text-align: left; } 

 <div id="paragraph"></div>