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

方法一

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> 标签的一个常见应用就是用来表示计算机的源代码。

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

[扩展]:

  • 空白折叠:在源代码中的连续空白字符(空格、换行、制表),在页面显示时,会被折叠成为一个空格。而在pre元素中的内容不会出现空白折叠,在pre元素中的内容,会按照源代码格式显示到页面上。
  • 显示代码时,通常在外面套一个code元素,code表示代码区域。
相关推荐
xiaopengbc9 分钟前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
前端AK君14 分钟前
React中台系统如何嵌入到业务系统中
前端
Slice_cy15 分钟前
不定高虚拟列表
前端
前端AK君24 分钟前
React组件库如何在vue项目中使用
前端
Moonbit34 分钟前
MoonBit 再次走进清华:张宏波受邀参加「思源计划」与「程序设计训练课」
前端·后端·编程语言
RestCloud37 分钟前
一站式数据集成:iPaaS 如何让开发者和业务人员都满意?
前端·后端·架构
li35741 小时前
React 核心 Hook 与冷门技巧:useReducer、useEffect、useRef 及 is 属性全解析
前端·javascript·react.js
菜市口的跳脚长颌1 小时前
Web3 基础
前端
快乐是Happy1 小时前
分享一个非常实用的防止重复提交操作
前端·javascript
王蛋1111 小时前
前端工作问题或知识记录
前端·npm·node.js