【前端】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表示代码区域。
相关推荐
岛风风15 小时前
关于手机的设备信息
前端
ReturnTrue86815 小时前
nginx性能优化之Gzip
前端
w_y_fan16 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇16 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端
Asort16 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手16 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码16 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码16 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
南雨北斗16 小时前
VS Code 中手动和直接运行TS代码
前端
小高00716 小时前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js