如何让输入框根据内容自动伸缩并换行？

这个自动调整大小的输入框...我2 02 2 年在上海做那个项目...客户想要一个异常灵活的输入框...它不能像传统输入那么严格...
你看...我用div代替input...是的...contenteditable="true"...当我第一次开始做这个...我头大...因为你不能在传统输入上直接使用CSS进行如此灵活的扩展...
我们先谈谈HTML结构...这只是外部就是这样。
一个div...称为输入容器...在另一个div...称为自动扩展...此自动扩展必须设置为 contenteditable="true"...
输入内容...

看...很简单...但是关键在后面...
CSS样式...这个是最重要的...应该这样写...
css .输入容器{ 最大宽度：3 00px； /限制最大宽度/ 边框：1 px实线ccc； /可选：添加边框/ 内边距：8 px； /可选：填充/ }
.自动展开{ 最小高度：2 0px； / 空时防止倒塌的最小高度 / 拆分词：全部分开； / 无论什么字符都强制换行 / 自动换行：断词； / 最好在单词中间断行 / 溢出换行：断字； / 现代浏览器这样写/ 显示：内嵌块； /key：根据内容的宽度调整容器的大小。
/ 宽度：1 00%； /填充父容器的宽度/ }
哎...这个显示：inline-block...一开始没看懂...但是后来尝试了...发现不仅可以根据内容改变宽度...而且还支持换行...太天才了...
你看...word-break:break-all...这个最残酷...不管多长的单词...在边界处断...北京2 02 2 调试的时候...找了好久才找到原文...溢出问题...我试过这个我只是没用过...
还有自动换行和自动换行。
Overflow-wrap...必须一起使用...overflow-wrap是后来的属性...兼容性不如word-wrap...但是效果是一样的...
适应性很强...可选...但是如果客户想要...我添加了JavaScript...
javascript document.querySelector('.auto-expand').addEventListener('input', function() { this.style.height = '自动'; // 首先重置高度。
this.style.height = this.scrollHeight + 'px'; // 根据内容高度调整 });
这个scrollHeight...真的很好...直接获取内容的实际高度...包括不可见的内容...并重新计算每个输入的高度...完美...
把整个代码放在一起...正如你所说...

<头> <风格> .输入容器{ 最大宽度：3 00px； 边框：1 px实线ccc； 内边距：8 px； }
.自动展开{ 最小高度：2 0px； 拆分词：全部分开； 溢出换行：断字； 显示：内联块； 宽度：1 00%； } </风格> </头> <文字>
输入内容...
<脚本> document.querySelector('.auto-expand').addEventListener('input', function() { this.style.height = '自动'; this.style.height = this.scrollHeight + 'px'; }); </脚本> </正文> </>
看...这一切都实现了吗...2 02 2 年？我在深圳测试过...效果特别好...客户也很满意...
重点是...就那么几件事...
1 .容器限制：在外层div上设置max-width来调整最大宽度...3 00px是一个例子...根据需要更改... 2 . 换行控件：断字和溢出换行可确保文本在其容器内换行。
3 .动态调整大小：显示：内联块和宽度的组合：1 00%...这个组合很棒... 4 .高度自适应：JavaScript监听输入事件动态修改高度...
兼容性也不错...现代浏览器都支持...不用担心IE老古董了...
哎...你说太多了...反正就这样...试试吧...一定能用...

HTML文档换行怎么实现_HTML换行符使用指南