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>

您不能对输入文本字段执行此操作，但是contenteditable div当然可以提供帮助。但是在做一些会占用div值的东西时要小心，因为这会带来一些意想不到的后果。我尝试从div返回值，但不会返回实际值，因此，在这里，您自己决定！

Answer 2

我不确定您所说的“中断”到底是什么意思，但是据我所知，如果要中断到单独的一行，则不能有多行文本输入字段。

您可以使用一些JavaScript在div标签的输入字段中反映值，该标签可以包装文字...

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

2 个答案: