【前端】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表示代码区域。
相关推荐
.生产的驴14 分钟前
React 集成Redux数据状态管理 数据共享 全局共享
前端·javascript·react.js·前端框架·css3·html5·safari
IT_陈寒17 分钟前
Redis性能优化的7个隐藏技巧:从慢查询到亿级QPS的实战经验分享
前端·人工智能·后端
艾小码35 分钟前
ES6+革命:8大特性让你的JavaScript代码质量翻倍
前端·javascript
两个西柚呀39 分钟前
Vue组件的一些底层细节
前端·javascript·vue.js
IT技术分享社区42 分钟前
前端:浏览器Content Security Policy 安全策略介绍和用法
前端·前端开发
林强1815 小时前
前端文件预览docx、pptx和xlsx
前端
像是套了虚弱散7 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan7 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇8 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15889 小时前
点击Top切换数据
前端·javascript·vue.js