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

方法一

string.replace(/rn/g,'</br&gt;’)

方法二  推荐  使用 pre 元素

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





  <div&gt;
    <pre>{{sqlHtml}}</pre>
  </div>

pre 元素

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

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

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

[扩展]：

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

代码007普通

打赏 收藏 海报 链接