How to break words on an input field so it starts a new line once the width of the field is reached?

Solution 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>

You can't do that to an input text field, but a contenteditable div can surely help. But be careful when making something which takes up the value from div as it makes some unintented consequences. I tried returning the value from div but it won't return the real value, so here, you are on your own!

How to break words on an input field so it starts a new line once the width of the field is reached?

Solution 1:

Related

Recent Posts