【前端】html不渲染换行\n\t\r等的问题
方法一
string.replace(/\r\n/g,'</br>')
方法二 推荐 使用 pre 元素
<style>
/* 设置 white-space 样式 */
pre {
white-space: pre-wrap;
}
</style>
<div>
<pre>{{sqlHtml}}</pre>
</div>
pre 元素
<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
由上述代码可知，在正常的元素中，无论使用多少个空格或换行符，都只会折叠成一个空格；而在pre中，会保留空格和换行符，显示的文本格式和html文件中的文本格式是一致的。
[扩展]：
- 空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠成为一个空格。而在pre元素中的内容不会出现空白折叠，在pre元素中的内容，会按照源代码格式显示到页面上。
- 显示代码时，通常在外面套一个code元素，code表示代码区域。