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

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

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

AI舌诊面诊问诊医疗系统+诊疗商城系统源码

AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。

下载

代码如下：

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

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