
自动变长输入框,让文字自由伸展
如何实现输入框随文字长度自动伸缩,并在超过行宽时自动换行的效果呢?
一位大神给出了一个巧妙的方案,利用了 div 的 contenteditable 属性。
代码如下:
你好, 请下午来开会
.input-container {
width: 200px;
}
.auto-expand {
display: inline;
word-break: break-all;
word-wrap: break-word;
border: 1px solid black;
}- 设置 .input-container 的宽度来限制输入框的总体宽度。
- 使用 .auto-expand div 作为可编辑区域,并设置 contenteditable 属性为 true。
- 设置 display: inline; 使输入框与其他元素同处一行。
- 设置 word-break: break-all; word-wrap: break-word; 使文字在达到行宽时自动换行。
- 可选:添加边框来显示输入框区域。
这样,输入框的内容就会随着文字长度的变化而自动伸缩,在达到行宽时还会自动换行,呈现出自然流畅的效果。










