html5 - 只用CSS如何实现input框的宽度随框里输入的内容长短自动适应？

Question

input框的宽度随框里输入的内容长短自动适应。
如果用JS来获取字符长度，再控制input框的width值，这样很容易就能实现。但是只靠CSS来实现，这样要怎么搞呢？

Answer 1

Generally, you don’t make the length of the box adapt to the content, because you don’t know how many words the user will input. What if it is 1,000 words, will you keep making it wider?

Generally, the width is a small value when the user is not inputting

When the user is ready to input, the input box stretches to a value

Answer 2

There is currently no way to achieve this with CSS, even using calc and css variables

Answer 3

html5 attributescontenteditable can achieve what you want through max-width min-width

<p contenteditable="true" style = 'width:300px'>这是一段可编辑的段落。请试着编辑该文</p>

Answer 4

There are also strange needs like this. If you are like this, it is best to use min-width and max-width to control the range.