我不知道的事input、textarea_html/css_WEB-ITnose

我很庆幸在大学的最后半年能够体验社会，找到一个年轻的团队；我很庆幸刚来公司就可以接触到具体项目并且能够参与进来；我很庆幸这半年来看到自己点点滴滴的进步；我很庆幸在自己迷茫又无措的时候有那么多默默伸出的援手......

昨天在盯着代码发呆的时候有人告诉我，我写的一个页面样式乱掉了。项目还没有上线，必须马上解决掉。看到页面的时候有些奇怪，我所有的数据都是从后台拿到后通过模板插入的，不可能其他的是好的，只有一条是乱的！于是马上审查元素，发现样式乱掉的那一部分dom结构被改变了，找到对应的填充到那里的数据，原来数据里面含有特殊字符，被html解析成了标签因此改变了我的dom结构。很快的发现了问题，下面就是解决它啦！

由于之前没有碰到过这种情况，经验不足，所以我的第一反应是在模板里面用innerText，果然报错了；转换成字符串？可人家本来就是字符串啊（哈哈，原谅我的无知）！

后来想想好像可以用input来解决这个问题。下面就来说说我用这两个标签所带来的问题......

从后台获取的数据："/::~/::B/::|/:8-)/::$/::X/::Z/::'(/::-|/::@"（大神可以看出来这是微信的表情编码，解析另说，我只需要将它原样放在页面上即可）

立即学习“前端免费学习笔记（深入）”；

将原本包裹这条数据的div标签改成了input标签，并通过css改变了其样式

<input type='text' value='/::~/::B/::|/:8-)/::</::$/::X/::Z/::'(/::-|/::@' >

目测是没有问题的，数据正常显示，dom没有错乱。可是好奇宝宝并没有止于此，在控制台里面将value改的老长，此时问题来了，input是单行文本框，是不会自动换行的（原来我早已将这件事抛之脑后了）

尝试着搜了一下input换行的问题，没有搜到怎么换行，只是说可以用textarea实现多行。（哪位大神指导请告诉我，小女子不胜感激~）

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

26

查看详情

于是果断将input换成了textarea，并通过css改变了其样式

<textarea>/::~/::B/::|/:8-)/::</::$/::X/::Z/::'(/::-|/::@</textarea>

将标签中的内容输的很长，问题很快就出现了：1.文本内容过长的时候会产生滚动条；2.高度不会自适应

这些都是我知道的事，之前没有需求所以没有觉得有什么不妥，看来这次是要解决一下啦~

在我有限的认知范围内当然是先这样：overflow:auto然而并没有什么效果

然后当然是搜搜搜......

关于这个问题，我找到一些答案，点击这里......

也找到比较好的解决方法，点击这里......

仔细看一看这些问题还是蛮有趣的，不同的视角同一个方向，感觉自己又见识了好多，将这两个链接放在这里，也许每次看的时候都会有新的收获！