How can I make the output of a js not on one single line? How can the output "fit" the input box?

Question

This is the js code I have written. It generate a random string. I have set this string to be 100 characters long but it doesnt "fit" the input box. The string is just shown on one line.

<div>
  <script>
    var password = document.getElementById("password");
    function genPassword() {
      var chars =
        "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      var passwordLength = 100;
      var password = "";
      for (var i = 0; i <= passwordLength; i++) {
        var randomNumber = Math.floor(Math.random() * chars.length);
        password += chars.substring(randomNumber, randomNumber + 1);
      }
      document.getElementById("password").value = password;
    }
    function copyPassword() {
      var copyText = document.getElementById("password");
      copyText.select();
      copyText.setSelectionRange(0, 999);
      document.execCommand("copy");
    }
  </script>
  <div class="konzbox">
    <h2>Zufälliger Konztest-Generator</h2>
    <input
      type="text"
      name=""
      placeholder="Erstelle Konztest"
      id="password"
      readonly
    />
    <table>
      <th>
        <div id="button" class="btn1" onclick="genPassword()">Generate</div>
      </th>
      <th>
        <div id="button" class="btn2" onclick="copyPassword()">Copy</div>
      </th>
    </table>
  </div>
</div>

You see here that not all of the output can be seen

Answer 1

You can use a textarea instead of input for your password.

function genPassword() {
   var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
   var passwordLength = 100;
   var password = "";
   for (var i = 0; i <= passwordLength; i++) {
      var randomNumber = Math.floor(Math.random() * chars.length);
      password += chars.substring(randomNumber, randomNumber +1);
    }
        document.getElementById("password").value = password;

    }
  function copyPassword() {
  var copyText = document.getElementById("password");
  copyText.select();
  copyText.setSelectionRange(0, 999);
  document.execCommand("copy");
  }

<div class="konzbox">
  <h2>Zufälliger Konztest-Generator</h2>
  <textarea name="" id="password" cols="30" rows="10" readonly></textarea>
  <table>
    <th><div id="button" class="btn1" onclick="genPassword()">Generate</div></th>
    <th><div  id="button" class="btn2" onclick="copyPassword()">Copy</div></th>
  </table>
</div>