|
|
IE 浏览器下，textarea 设置 white-space: normal 表现为不允许换行
最初发现的问题是，IE 浏览器中
textarea
聚焦时敲击回车，光标不换行，视觉上只是生成了一个空格。一开始我把问题归咎于 IE 对这个标签支持不够完善，但查看其 DOM 结构以及获取其值后，我发现都是正常换行的，所以才开始一个个排查样式，最终确认是
white-space: normal
导致的。
textarea + white-space: normal
表现
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> .test { white-space: normal; </style> </head> <textarea cols="30" rows="10" class="test"></textarea> </body> </html>
遂修改
white-space: normal
为
white-space: pre-line
，问题得以解决。
删除
white-space
属性或则修改为
pre-wrap
也可以解决该问题，根据实际环境选择。