如何强制在textarea中换行呢
说起在textarea里强制换行，其实有好几个办法，咱们一起来看看吧：
- 给textarea加个属性
wrap="hard"，这样写后，文本区里的换行会被保存并发送给服务器，换行被“硬”认可了，关键是这种换行字符是真实存在的，挺实用。 - 还有
wrap="virtual"，这不一样，会让文本区显示两行（比如单词"makes"后自动换行），但实际上只有一行文本会被传送出去，因为里面的换行符没被嵌入。 wrap="physical"也是个选项，这个会让文本区呈现两行文本，换行符会传送给服务器，换行效果是真正的换行。这么看，用这个属性会比较“靠谱”，文本打包发服务器啥的没问题。
其实这些属性得根据你项目需求来选，想要前后端都认同换行的，就用wrap="hard"或者wrap="physical"，不然有时候换行只是视觉效果而已。
如何在textarea中换行以及换行显示操作技巧
好啦，既然知道了属性，我们再来说说真正实现换行的操作技巧，以及你可以用的一些小妙招：
-
使用回车键实现换行
这老土了，但最管用。用户在textarea里输入代码或文字，只要按Enter键，光标立马跳到下一行，这最直接也最常见，没啥好怀疑的。 -
CSS帮你实现placeholder的换行
你知道吗？textarea的占位符（placeholder）默认是不换行的，但我们可以用CSS的::placeholder伪元素配点魔法。
- 利用::before或::after伪元素和content属性，把换行符\a插入进去，再配合white-space: pre来保留空格和换行，这样placeholder看起来就能多行显示了！
- 这个方法在UI设计上特别棒，放点长一点的提示语啥的，超级溜。 -
Java里的Textarea自动换行
如果你搞Java Swing界面的朋友，知道JTextArea有个方法setLineWrap(true)，动动嘴不如动动手，直接调用这个方法，文字自动到下一行，非常方便。
- 还有，想让每次输入都换新的一行，直接在字符串后加上\r\n（回车换行符），比如jTextArea.append("内容"+"\r\n");，这样你输入的内容就每次都能另起一行啦，没毛病。 -
换行符在JavaScript和HTML中的表现
在textarea里，换行其实是靠换行符实现的，比如\n。但你要知道，如果你用这个符号直接往一般的div里插入文本，比如document.querySelector(".a").innerHTML = "12\n1";，你会发现没换行，反而是一堆文字、空格缠在一起。
- 这是因为HTML默认把所有空白（包括换行）都当成一个空格对待，要显示换行你得给元素设置white-space: pre或者类似属性，否则换行符不起作用。
- 简言之，textarea很好地支持换行符，而普通HTML标签就得配合对应的CSS，才能看到换行。
总结下，你想让textarea换行：要么用HTML属性装起来，要么用JS小技巧，或者靠CSS给placeholder变魔法，都能轻松搞定，真心方便。
相关问题解答
-
textarea中的wrap属性有什么区别吗?
哎，说实话，这三个wrap啊，hard、virtual、physical，各自有点鲜明的特点。
用hard就是让换行符真的“硬”存在，服务器收到数据后也能看出来。
virtual就比较“假”，换行在视觉上有，但不传送回服务器，挺适合前端玩玩视觉效果。
physical有点类似hard，换行同时传给后台。根据你到底是不是真要存换行，选择咯，超实用的。 -
怎么用CSS让textarea的placeholder换行?
注意啦！placeholder默认不给你换行，嘻嘻。
可用::placeholder配合::before伪元素套路一下，插个\a（换行符），再用white-space: pre来告诉浏览器别吞空白，空间里换行！
写点白话提示啥的，一眼能读完，UI简直棒到飞起。 -
用Java的JTextArea怎么自动换行？
这个嘛，Java Swing控件有setLineWrap(true)，超级简单，你一调用，文字自动“跑”到下一行，省心省力。
想让每次输入时直接换新行，往字符串尾巴加\r\n，这手法超级直接，信我，试试没错。 -
为什么给div标签插入带\n的文本没换行效果？
哈哈，这个问题老常见了，其实就是HTML的空白符处理机制惹的祸。
文本里的\n是换行符，但HTML里默认把所有空白字符都看做一个空格，秒变一排文字。
要让换行显现，给元素加white-space: pre、pre-wrap啥的CSS属性，一下子就能让换行生效。
这招棒极了，动画啊文字排版啊，玩出花样。
新增评论