当前位置: 首页 > Web前端 > HTML

前端问答-如何在页面输出换行符

时间:2023-04-02 21:10:26 HTML

我们有以下几种方式来收集用户input输入框输入的内容,单行,整体风格,纯文本。textarea输入框,多行,整体风格,纯文本。内容可编辑,多行,独立样式,富文本。其他富文本编辑器,多行,独立样式,富文本。如果你不想使用这么重的富文本编辑器,又想换行,那么textarea是我们最好的选择。让我们谈谈如何在回显时显示换行符。测试地址方案一:textarea显示既然我是用textarea输入的,那我就可以用textarea来显示了。测试地址textarea方案优点无xss注入风险无需特殊处理,内部理解\n,空格也认可textarea方案缺点需要设置为不可编辑ReadonlyDisabled需要设置为不可缩放我不会写。原理是构造一个与当前textarea大小相同的div,然后使用div的高度。一般用于自动放大可输入的textarea。方案二:v-html,innerHTML,.html()由于我们不认识\n,所以我们把它转成标签显示。这个方案最大的问题就是要小心xss问题。测试地址的优点是可以自动扩展内容区域。缺点是有xss注入的风险,需要转义成实体代码。仍然无法识别空格。方案三:v-text,innerText,textContent,.text()这个方案也是innerText。因为innerText会自动将\n转换为
。测试地址优点没有xss注入问题缺点OnlyInnerText会自动转换换行符,不支持空格。选项4:特殊标记

这个选项是理想的。测试地址优点支持空格支持换行兼容性极好缺点需要使用特定标签?这不是错误。不要包裹。..方案五:white-space是基于方案四的,其实也有对应的css方案,就是white-space。微信公众号:前端立农结论有那么多操作,你用的是哪一个?或者你有什么其他的打算吗?