【前端】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表示代码区域。
相关推荐
马尔代夫哈哈哈22 分钟前
SpringBoot 统一功能处理
java·前端·spring boot
慧一居士41 分钟前
tsconfig.json完整使用配置介绍和示例
前端·vue.js
哆啦A梦15881 小时前
Vue3魔法手册 作者 张天禹 07_标签
前端·vue.js·typescript
似水流年QC1 小时前
前端性能优化实战:用 IntersectionObserver 实现图片懒加载
前端·性能优化
q1cheng1 小时前
基于Spring Boot + Vue项目online_learn的权限控制机制分析
前端
扶苏10021 小时前
深入理解 Vue 3 的 watch
前端·javascript·vue.js
前端 贾公子1 小时前
组件 v-model 的封装实现原理及 Input 组件的核心实现(上)
服务器·前端·javascript
weixin199701080161 小时前
亚马逊商品详情页前端性能优化实战
前端·性能优化
全栈前端老曹1 小时前
【Redis】 监控与慢查询日志 —— slowlog、INFO 命令、RedisInsight 可视化监控
前端·数据库·redis·缓存·全栈·数据库监控·slowlog
扶苏10021 小时前
Vue 3 的组合式 API(Composition API)优势
前端·javascript·vue.js