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

Question

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

Answer 1

一般に、ボックスの長さをコンテンツに合わせて調整することはありません。ユーザーが入力する単語数がわからないからです。1,000 単語の場合は、ボックスの幅を広げ続けますか?

一般に、ユーザーが入力していないときは幅は小さい値になります

ユーザーが入力する準備ができると、入力ボックスが値に合わせて拡大されます

Answer 2

現時点では、calc 変数や css 変数を使用しても、CSS でこれを実現する方法はありません

Answer 3

html5 属性contenteditable は、max-width min-width

を通じて必要なものを実現できます。 リーリー

Answer 4

このような奇妙なニーズもあります。そのような場合は、min-width と max-width を使用して範囲を制御するのが最適です。