前端答疑-换行如何输出在页面上

工做中咱们有下面几种方式收集用户输入的内容

1. input 输入框，单行，总体样式，纯文本。
2. textarea 输入框，多行，总体样式，纯文本。
3. contentEditable，多行，独立样式，富文本。
4. 其余富文本编辑器，多行，独立样式，富文本。

在不想使用那么重的富文本编辑器的状况下，又想能够换行，那么 textarea 就是咱们的不二之选。

下面咱们就来讲一下，如何在回显的时候也显示换行。

测试地址

方案一：textarea 显示

既然我使用 textarea 输入的，那么我使用 textarea 显示总能够吧。
测试地址

textarea 方案优势

1. 无 xss 注入风险
2. 无需特殊处理，内部就认识\n,空格也认识

textarea 方案缺点

1. 须要设置不可编辑

   1. readonly
   2. disabled

2. 须要设置不可缩放

   1. resize:none

3. 没法自动撑开内容区域

   1. 须要js辅助计算，具体代码我就不写了。原理就是构造一个和当前textarea同样大的div，而后使用div的高度。通常用于能够输入的textarea自动变大。

方案二：v-html、innerHTML、.html()

既然咱们不识别\n，那咱们就把他转换成标签来显示。
这个方案最大的问题就是千万当心xss问题。

测试地址

优势

1. 能够自动撑开内容区

缺点

1. xss注入风险，须要转义为实体编码。
2. 空格仍是不识别。

方案三：v-text、innerText、textContent、.text()

这个方案也就 innerText 还能够。由于 innerText会自动转换\n为<br>。

测试地址

优势

1. 无xss注入问题

缺点

1. 只有innerText会自动转换换行
2. 不支持空格。

方案四：特殊标签 <pre>

这个方案就很理想了。

测试地址

优势

1. 支持空格
2. 支持换行
3. 兼容性极好

缺点

1. 须要使用特定标签？这也不算bug吧。
2. 不换行。。。

方案五：white-space

基于方案四，其实还有对应的css方案，那就是 white-space。
测试地址

缺点

1. 兼容性问题吧

优势

1. 属性值较多，能够适配各类场景

微信公众号：前端linong

结语

这么多操做，你使用哪一种呢？或者你还有什么方案呢？