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

方法一

string.replace(/\r\n/g,'</br>')

方法二  推荐  使用 pre 元素

<style>
/* 设置 white-space 样式 */
pre {white-space: pre-wrap;
}
</style><div><pre>{{sqlHtml}}</pre></div>

pre 元素

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

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

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

[扩展]:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/190362.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python学习路线 - Python语言基础入门 - 基础语法

Python学习路线 - Python语言基础入门 - 基础语法 字面量什么是字面量常用的值类型字符串 注释注释的作用注释的分类 变量什么是变量变量的特征 数据类型type()语句type()语句的使用方式数据类型转换 标识符什么是标识符标识符命名规则标识符命名规则 - 内容限定标识符命令规则…

基于docker容器部署JVM参数分析

基于docker容器部署JVM参数分析 公司项目推荐的 jvm 配置&#xff0c;简述下配置含义 -XX:UseContainerSupport -XX:MaxRAMPercentage75.0 -XX:InitialRAMPercentage75.0 -XX:MinRAMPercentage75.0 // JVM提供了MaxRAMPercentage,InitialRAMPercentage,MinRAMPercentage三…

Go 语言中的结构体:定义、初始化与高级用法解析

一、结构体基础 1、什么是结构体 Go语言中没有“类”的概念&#xff0c;也不支持“类”的继承等面向对象的概念Go语言中通过结构体的内嵌再配合接口比面向对象具有更高的扩展性和灵活性 2、自定义类型 在Go语言中有一些基本的数据类型&#xff0c;如string、整型、浮点型、…

算法通关村第七关—理解递归(青铜)

理解递归 一、递归的特征 1.执行范围不断缩小 递归类似数学里的递推&#xff0c;设计递归就是努力寻找数学里的递推公式&#xff0c;例如阶乘的递推公式就是f()n*f(n-1),很明显一定是要触底之后才能反弹。再比如斐波那契数列的递归公式为f(n)f(n-1)f(n-2),n也在不断缩小。这条…

Java开发实战(二):IDEA安装

工欲善其事&#xff0c;必先利其器。这句话同样适用于学习Java编程。在开始Java的学习旅程之前&#xff0c;我们必须首先配置好适合的开发环境。 通过事先准备好这些工具和配置&#xff0c;我们可以避免在学习过程中遇到因环境问题导致的代码异常或错误。一个稳定、高效的开发环…

网络通信原理,进制转化总结

来源&#xff0c;做个笔记&#xff0c;讲的还蛮清楚通信原理-2.5 数据封装与传输05_哔哩哔哩_bilibili ip地址范围

万界星空科技智能工厂主要建设模式

由于各个行业生产流程不同&#xff0c;加上各个行业智能化情况不同&#xff0c;智能工厂有以下几个不同的建设模式。 第一种模式&#xff1a;是从生产过程数字化到智能工厂 在石化、钢铁、冶金、建材、纺织、造纸、医药、食品等流程制造领域&#xff0c;企业发展智能制造的内在…

Django HMAC 请求签名校验与 Vue.js 实现安全通信

概要 在 Web 应用的开发过程中&#xff0c;确保数据传输的安全性和完整性是一个不容忽视的问题。使用 HMAC&#xff08;Hash-based Message Authentication Code&#xff09;算法对请求内容进行签名校验&#xff0c;是一种常见且有效的安全策略。本文将详细介绍如何在 Django …

Linux驱动开发入门

文章目录 Linux驱动开发入门什么是内核模块&#xff1f;第一个内核模块main.cMakefile编译和加载模块 总结 Linux驱动开发入门 Linux内核驱动开发是一个高级话题&#xff0c;涉及到对操作系统核心部分的深入理解。这个系列的笔记旨在帮助初学者理解Linux驱动开发的基础知识。我…

springBoot整合quartz

springBoot整合quartz 文章目录 springBoot整合quartz 导坐标 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-quartz</artifactId></dependency>定义任务&#xff0c;不需要定义为Bean&#x…

WT2605-24SS音频蓝牙录放语音芯片:标准蓝牙功能与多样化存储播放方式助力音频体验升级

在音频技术日新月异的今天&#xff0c;WT2605-24SS音频蓝牙录放语音芯片以其强大的功能和出色的性能&#xff0c;成为了音频市场的一颗璀璨明星。该芯片不仅具备标准音频蓝牙功能&#xff0c;还支持蓝牙电话本、录音功能以及多种存储和播放方式&#xff0c;为用户提供了更加便捷…

2023最新软件测试八股文,你背得怎样了

今天给大家分享软件测试面试题基础篇&#xff0c;看看大家能答对几题 1、软件测试方法有哪些分类?各自有什么特点?设计测试用例的主要方法有哪些? 白盒: 测试人员利用程序内部的逻辑结构及相关信息&#xff0c;设计或选择型试用例:对程序所有的逻辑路径进行测试。 黑盒: …

Toys——约瑟夫环问题

Lark收藏了很多玩具。尽管她有很多玩具&#xff0c;但她每次只喜欢玩一个。她决定玩哪个玩具&#xff0c;把所有玩具放在她周围的一个圆圈里&#xff0c;编号为 0 到 T-1 。然后&#xff0c;她顺时针旋转&#xff0c;去除第K个玩具&#xff0c;直到剩下一个为止。这意味着她拿走…

猜你需要的免费api接口汇总

手机号码归属地&#xff1a;提供三大运营商的手机号码归属地查询。AI绘画-Stable Diffusion&#xff1a;通过AI 生成图片&#xff0c;包括图生文、文生图等。AI绘画-Mid Journey&#xff1a;使用 Midjourney 目前全球领先的图片大模型&#xff0c;其能根据输入文字提供极其优秀…

2023_Spark_实验二十四:SparkStreaming读取Kafka数据源:使用Direct方式

SparkStreaming读取Kafka数据源&#xff1a;使用Direct方式 一、前提工作 安装了zookeeper 安装了Kafka 实验环境&#xff1a;kafka zookeeper spark 实验流程 二、实验内容 实验要求&#xff1a;实现的从kafka读取实现wordcount程序 启动zookeeper zk.sh start# zk.sh…

【JavaSE学习专栏】第04篇 Java面向对象

文章目录 1 面向过程&面向对象2 类和对象2.1 对象的特征2.2 java类及类的成员2.3 类的语法格式 3 创建与初始化对象3.1 类的成员之一&#xff1a;属性3.2 类的成员之二&#xff1a;方法3.3 类的成员之三&#xff1a;构造器&#xff08;构造方法&#xff09;3.3.1 无参构造方…

仿QT信号与槽的简易框架

信号与槽通常被用于对象间的通信、事件驱动等场景&#xff0c;相比于回调函数的优势是动态连接、支持多对多、参数类型检查更安全、更加松耦合等。 这里提供一个C实现的简易仿信号与槽的框架。注&#xff1a;QT中信号与槽是基于较复杂的元对象系统&#xff0c;而这里只是以基本…

hexo博客部署到云服务器

欢迎大家到我的博客浏览。hexo博客部署到云服务器 | YinKais Blog 这篇文章带大家将hexo博客部署到云服务器上&#xff01; 一、服务器环境安装 1、安装 node js yum install gcc-c make yum -y install nodejs yum -y install npm 验证 node -v npm -v 2、安装git、ngin…

Linux 命令stat

命令作用 stat命令用于显示文件的状态信息。stat命令的输出信息比ls命令的输出信息要更详细。 查看的信息内容: File 显示文件名 Size 显示文件大小 Blocks 文件使用的数据块总数 IO Block IO块大小 regular file 文件类型&#xff08;常规文件&#xff09; Device …

Postman Post请求上传文件

Postman Post请求上传文件 一、选择post请求方式&#xff0c;输入请求地址 二、填写Headers Key&#xff1a;Content-Type Value&#xff1a;multipart/form-data [{"key":"Content-Type","value":"multipart/form-data","de…