【前端】html不渲染换行\n\t\r等的问题

我是Superman丶2023-11-29 12:10

方法一

string.replace(/\r\n/g,'</br>')

方法二推荐使用 pre 元素

html 复制代码

<style>
/* 设置 white-space 样式 */
pre {
  white-space: pre-wrap;
}
</style>





  <div>
    <pre>{{sqlHtml}}</pre>
  </div>

**<pre> 元素可定义预格式化的文本。**被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

由上述代码可知，在正常的元素中，无论使用多少个空格或换行符，都只会折叠成一个空格；而在pre中，会保留空格和换行符，显示的文本格式和html文件中的文本格式是一致的。

[扩展]：

空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠成为一个空格。而在pre元素中的内容不会出现空白折叠，在pre元素中的内容，会按照源代码格式显示到页面上。
显示代码时，通常在外面套一个code元素，code表示代码区域。