自动伸缩输入框，正文换行的实现

对于“输入框自动伸缩并换行”的问题，有一种广泛采用的解决方案利用了 html 中的 contenteditable 属性。

解决方案：

在 html 代码中创建包含输入内容的可编辑 div 元素。

<div class="auto-expand" contenteditable="true">111</div>

样式设置：

然后，为 div 设置以下 css 样式：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.auto-expand {
    display: inline;
    word-break: break-all;
    word-wrap: break-word;
    border: 1px solid black;
}

• display: inline 允许 div 在文本内呈行内元素显示。
• word-break: break-all 和 word-wrap: break-word 允许文本在单词边界断行。
• border: 1px solid black 仅用于演示目的，可以根据需要移除。

原理：

当用户输入内容时，编辑器内的文字会在其可用宽度内自动增长和换行。:contenteditable 属性将 div 标记为可编辑区域，而 word-break 和 word-wrap 允许文本在空间限制下自动调整。

示例：

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

效果：

文本会适应父元素的宽度自动伸缩，超出宽度时会自动换行。