html5 - 只用CSS如何实现input框的宽度随框里输入的内容长短自动适应?
PHP中文网
PHP中文网 2017-04-17 14:38:36
0
4
853

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

PHP中文网
PHP中文网

认证高级PHP讲师

membalas semua(4)
洪涛

一般不会让框的长度随内容自适应的,因为你不知道用户会输入多少字,万一是1000字,你也一直变宽么

一般是用户不输入的时候宽度是一个小的值

用户准备输入的时候,输入框拉长到一个值

大家讲道理

CSS目前是没有办法实现这个,就算用了calc和css变量也不行

洪涛

html5属性contenteditable 可以通过max-width min-width达到你想要的

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

这种奇怪的需求也有啊,你这样的话最好还是用min-width和max-width控制范围.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan