如何使用 contenteditable 属性实现输入框自动伸缩并换行？

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

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

解决方案：

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

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

样式设置：

然后，为 div 设置以下 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>

效果：

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

以上就是如何使用 contenteditable 属性实现输入框自动伸缩并换行？的详细内容，更多请关注其它相关文章！