I’m working on a hangman website in react that allows for users to create words and hits for other users to solve, right now I’m working on a component that allows users to see some hints to maybe get an idea from but this list but the text that I have is overflowing out of the temporary border that I made. How could I make it stay within the container?

I’ve tried dom, and react states and dom wasn’t working at all and then react states is when it was overflowing.
The react state is a

 container that is surrounded by a div with the border.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code><div className = "List" style = {{ border : 3, borderColor: "white", borderStyle : "solid"}}>  <h2  className = "List" style={{color:"white"}}>User created words: <br/><pre >{wordList}</pre></h2>
 </div>
</code>
<code><div className = "List" style = {{ border : 3, borderColor: "white", borderStyle : "solid"}}>  <h2  className = "List" style={{color:"white"}}>User created words: <br/><pre >{wordList}</pre></h2>
 </div>
</code>
<div className = "List" style = {{ border : 3, borderColor: "white", borderStyle : "solid"}}>  <h2  className = "List" style={{color:"white"}}>User created words: <br/><pre >{wordList}</pre></h2>
 </div>

And then the list css
.List h2 {

  width: 40%;

  word-wrap: break-word;

}


And this is what it shows up as:

image of the current website

Any help getting the text to stay in the border would be greatly appreciated, Thanks!