CSS - How can I make shrinking(wrapping) input box?

Question

I want to make input box which wraps text and shrink to it's size, what property should I use?

I tried to scale it using width: auto but it's no use.

You would need javascript for this if you need it to be an input, otherwise you could use a [content editable inline block element](https://jsfiddle.net/pogjahxk/1/) — Pete, Oct 28 '22 at 11:05
see if this will help you https://stackoverflow.com/a/3392617/20261328 — jessica-98, Oct 28 '22 at 11:06
Please provide enough code so others can better understand or reproduce the problem. — Community, Oct 28 '22 at 11:30

score 0 · Answer 1 · answered Oct 28 '22 at 11:27

The only way to do this is using contenteditable with a div element, otherwise you have to rely on JavaScript

const myinput = document.querySelector('.myinput');
document.querySelector('#mybutton').addEventListener('click', () => {
  alert(myinput.innerHTML);
})

.myinput {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 3px;
  background-color: #e5e5e5;
  min-width: 10px;
  max-width: 400px;
  height: 22px;
  line-height: 22px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
}

<div contenteditable="true" class="myinput"></div>
<button id="mybutton">Get input value</button>

CSS - How can I make shrinking(wrapping) input box?

1 Answers1