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

方案一：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. 属性值较多，可以适配各种场景