CODEWITHSUNDEEP
htmlcss
Lukeyy
Lukeyy

Reputation: 77

How to make an input go to next line when reaching its width HTML

so I am trying to do something reasonably simple, I have an 'input' on my website which has a width of 1000px. However once you have filled that line, I want the input to then go to the next line down instead of running off the text box.

For example I want this: enter image description here

To look like this:

enter image description here

I am not really sure what the correct term is for this, so sorry if its confusing and messy.

Thanks :)

Upvotes: 3

Views: 11179

Answers (2)

Tanner Dolby
Tanner Dolby

Reputation: 4421

I would recommend replacing your <input> element with a <textarea> in the form. This way, any text that overflows the <textarea>'s content box will wrap onto the next line. The default styling for <textarea> elements in the User Agent Stylesheet contain overflow-wrap: break-word; which allows long words to be broken and wrap onto the next line.

overflow-wrap property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.

Unfortunately, there isn't a well-defined way to do this for <input> elements.

.my-form {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
}

.my-form textarea {
  border: .2rem solid #000;
  resize: vertical; /* control in which direction textarea can be resized */
}
<form class="my-form">
  <label for="msg">Write message</label>
  <textarea id="msg" name="msg" rows="5" cols="50">SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS</textarea>
</form>

Upvotes: 6

Ammad Amir
Ammad Amir

Reputation: 518

try to use textarea field for this. Using input text field is not a good idea

.textarea-custom
{
  min-height:150px;
  max-height:250px;
  min-width:100%;
  max-width:100%;
}
<textarea class="textarea-custom" placeholder="Enter text here..." rows="" cols="" name="" form="">
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</textarea>

Upvotes: 1

Related Questions