html - 如何在输入字段上打断单词，以便在达到字段宽度后开始换行？

Question

.form-container {
  float: left;
  width: 100%;
}

.form-container input[type=text] {
  padding-bottom: 40px;
  overflow-y: auto;
  overflow-wrap: break-word;
}

    <form class="form-container">
      First name:<br>
      <input type="text" name="firstname" value="Mickey">
      <br>
      Last name:<br>
      <input type="text" name="lastname" value="Mouse">
      <br><br>
      <input type="submit" value="Submit">
    </form>

我需要使用输入字段，而不是文本区域，并且我希望一旦达到输入字段的宽度，文字就会中断。目前，所有内容都写在同一行中。

在下面找到我一直在尝试的代码。

在此先感谢您帮助这个新手!

.form-container {
  float: left;
  width: 100%;
}

.form-container input[type=text] {
  padding-bottom: 40px;
  overflow-y: auto;
  overflow-wrap: break-word;
}

    <form class="form-container">
      First name:<br>
      <input type="text" name="firstname" value="Mickey">
      <br>
      Last name:<br>
      <input type="text" name="lastname" value="Mouse">
      <br><br>
      <input type="submit" value="Submit">
    </form>

Answer 1

const mickey = document.querySelector('#firstname').textContent;

.form-container {
  float: left;
  width: 100%;
}

#firstname {
  padding-bottom: 40px;
  max-width: 60px;
  overflow-y: auto;
  overflow-wrap: break-word;
  border: 1px solid black;
}

    <form class="form-container">
      First name:<br>
      <div id="firstname" contenteditable="true">Mickey</div>
      <br>
      Last name:<br>
      <input type="text" name="lastname" value="Mouse">
      <br><br>
      <input type="button" value="Submit" onclick="console.log(mickey);">
    </form>

您不能对输入文本字段执行此操作，但可内容编辑的 div 肯定会有所帮助。但是在制作占用 div 值(value)的东西时要小心，因为它会产生一些意想不到的后果。我尝试从 div 返回值，但它不会返回真正的值，所以在这里，你要靠自己了!