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

Question

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

Answer 1

通常不會讓框的長度隨內容自適應的，因為你不知道使用者會輸入多少字，萬一是1000字，你也一直變寬麼

一般是使用者不輸入的時候寬度是一個小的值

使用者準備輸入的時候，輸入框拉長到一個值

Answer 2

CSS目前是沒有辦法實現這個，就算用了calc和css變數也不行

Answer 3

html5屬性contenteditable 可以透過max-width min-width達到你想要的

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

Answer 4

這種奇怪的需求也有啊,你這樣的話最好還是用min-width和max-width控制範圍.