Output text doesn’t wrap correctly

Question

I created a custom word generator based on this example code:

<html>
<head>
  <title>random words</title>
  <style>
    
   
    
    #output {
    
      font-family:fantisy;
    }
  </style>
</head>
<body>

  <h2>random word generator</h2>
  <div>
    <button>generate</button>
  </div>
  <div>
   
  

  <div id="output"></div>

  <script>
   
    var btn = document.querySelector("button");
    var out = document.getElementById("output");
    
  
    btn.addEventListener("click", getSentence);
   
    function getSentence(){
     
      
      var theSentence= [
        'Pneumonoultramicroscopicsilicovolcanoconiosiseumonoultramicroscopicsilicovolcanoconiosiseumonoultramicroscopicsilicovolcanoconiosiseumonoultramicroscopicsilicovolcanoconiosiseumonoultramicroscopicsilicovolcanoconiosiseumonoultramicroscopicsilicovolcanoconiosiseumonoultramicroscopicsilicovolcanoconiosis',
        'A long sentence that doesn\'t wrap correctly, A long sentence that doesn\'t wrap correctly, A long sentence that doesn\'t wrap correctly, A long sentence that doesn\'t wrap correctly, A long sentence that doesn\'t wrap correctly, A long sentence that doesn\'t wrap correctly, A long sentence that doesn\'t wrap correctly.',
      ];

      
      var sentenceNum = Math.floor(Math.random() * theSentence.length);
      
     
      output.textContent = theSentence[sentenceNum];
    }
</script>
</body>
</html>

My problem is that the output text doesn’t wrap when the viewport is not wide enough. It’s a problem, especially on mobile.

I‘ve tried setting word-wrap or overflow-wrap but that doesn’t work.

How can I make the output wrap?

Does this answer your question? [wordwrap a very long string](https://stackoverflow.com/questions/856307/wordwrap-a-very-long-string) — chiliNUT, Jul 03 '23 at 20:04
Please [edit](https://stackoverflow.com/posts/76607764/edit) your question to include a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example). You can use the [snippet editor](https://meta.stackoverflow.com/q/358992/2505965) to include a runnable example. — Oka, Jul 03 '23 at 20:06

score 1 · Answer 1 · answered Jul 03 '23 at 20:45

1

Set the break-word value on the element's word-break property.

#output{
  font-family:fantisy;
  word-break: break-word;
}

Also, it would be better if you set a width for the element.

answered Jul 03 '23 at 20:45

Alexis88

297
1
11

Output text doesn’t wrap correctly

1 Answers1