如何用 div 的 contenteditable 属性实现自动伸缩的输入框？

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《如何用 div 的 contenteditable 属性实现自动伸缩的输入框？》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

自动变长输入框，让文字自由伸展

如何实现输入框随文字长度自动伸缩，并在超过行宽时自动换行的效果呢？

一位大神给出了一个巧妙的方案，利用了 div 的 contenteditable 属性。

代码如下：

<div class="input-container">
    你好，
    <div class="auto-expand" contenteditable="true">111</div>
    请下午来开会
</div>

.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; 使文字在达到行宽时自动换行。
• 可选：添加边框来显示输入框区域。

这样，输入框的内容就会随着文字长度的变化而自动伸缩，在达到行宽时还会自动换行，呈现出自然流畅的效果。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。