解决:接口中返回的文本不能保持原本格式也无法换行

一、问题:

原本传入的文本是有换行的,但是用div展示接口返回的文本,所示内容没有保持原有格式没达到换行效果

以下是传入到接口的文本格式

使用div标签展示接口返回的文本,但并没有保持原有格式,文本也没换行

 <div class="value line14">{{ printData }}</div>  

div展示文本是没有换行的, 其中printData是从接口获取存入的文本

二、需求:

要保留原有的内容格式,且文本有换行

三、解决方法:

3.1、将div标签更改为pre标签

<pre class="value line14">{{ printData }}</pre>

此时文本会保留原因的内容格式, 且有换行,

3.2、新问题

但是:<pre>标签的内容不会自动换行,如果一行文字太多时会超出屏幕,形成横向滚动条

解决:让<pre>文本内容自动换行 (兼容多个浏览器):

<style lang="scss" scoped>pre{white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;*word-wrap: break-word;*white-space : normal ;}
</style>

3.3、最终展示效果👇

每行有空格,换行等,都能保持原本格式👇

最后,👏👏 😀😀😀 👍👍   

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

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

相关文章

奇怪的事情记录:外置网卡和外置显示器不兼容

身为程序员&#xff0c;不应该对世界上的稀奇古怪的事情感到惊讶&#xff08;毕竟&#xff0c;大部分都是程序员自己搞出来的&#xff09;。 外置网卡和外置显示器不兼容 mbp2019intel版&#xff0c;win10&#xff0c;外接有线网卡&#xff0c;平时用得很好&#xff0c;接上外…

做科技类的展台3d模型用什么材质比较好---模大狮模型网

对于科技类展台3D模型&#xff0c;以下是几种常用的材质选择&#xff1a; 金属材质&#xff1a;金属材质常用于科技展台的现代感设计&#xff0c;如不锈钢、铝合金或镀铬材质。金属材质可以赋予展台一个科技感和高档感&#xff0c;同时还可以反射光线&#xff0c;增加模型的真实…

批量多目录将任意文件转为base64的效率工具

本篇文章主要介绍一款编程工作中日常会使用到的批量多目录将任意文件转为base64的效率工具&#xff0c;他能够帮助你快速将任何格式的文件base64化&#xff0c;并转为json、xml、yaml等数据格式使用。 日期&#xff1a;2024年1月10日 获取地址&#xff1a;https://download.csd…

训练自己的GPT2

训练自己的GPT2 1.预训练与微调2.准备工作2.在自己的数据上进行微调 1.预训练与微调 所谓的预训练&#xff0c;就是在海量的通用数据上训练大模型。比如&#xff0c;我把全世界所有的网页上的文本内容都整理出来&#xff0c;把全人类所有的书籍、论文都整理出来&#xff0c;然…

刷题第十五天-存在重复元素Ⅲ

存在重复元素Ⅲ 题目要求 解题思路 主要使用滑动窗口方法&#xff0c;让滑动窗口代销固定为t。 本题最大的难点在于快速地找到滑动窗口内的最大值和最小值&#xff0c;以及删除指定元素。 如果遍历求滑动窗口内的最大值和最小值&#xff0c;时间复杂度是O&#xff08;K&#…

关于Tomcat源码学习 这里是一些建议

关于Tomcat源码学习&#xff0c;可以从以下方面开始&#xff1a; 了解Tomcat的基本架构 首先&#xff0c;了解Tomcat的整体架构&#xff0c;包括Catalina&#xff08;核心容器&#xff09;、Jasper&#xff08;JavaServer Pages引擎&#xff09;和Coyote&#xff08;连接器组…

Linux(上篇)

计算机硬件软体系 顺序执行程序 计算机硬件由运算器&#xff0c;控制器&#xff0c;存储器&#xff0c;输入设备&#xff0c;输出设备五大部分组成 计算机硬件组成 输入设备 用来将人们熟悉的信息形式转换为机器能够识别的信息形式。 输出设备 将机器运算的结果装换为人…

redis的使用、打开、关闭的详细介绍

redis的使用、打开、关闭的详细介绍 1.安装redis cd / cd opt/ wget https://download.redis.io/releases/redis-5.0.5.tar.gz 2.解压redis tar xzf redis-5.0.5.tar.gz 3.执行make cd redis-5.0.5/ make 如果出现找不到make的情况就yum install -y make 如果没有gcc就…

【BIAI】Lecture 7 - EEG data analysis

EEG data analysis 专业术语 EEG 脑电图 excitatory postsynaptic potential(EPSP)兴奋性突触后电位 inhibitory postsynaptic potential(IPSP) 抑制性突触后电位 action potential 动作电位 dipoles 偶极子 Pyramidal neurons 椎体细胞 Axon 轴突 Dendrite 树突 Synapse 突触…

【大数据架构】OLAP实时分析引擎选型

OLAP引擎面临的挑战 常见OLAP引擎对比 OLAP分析场景中&#xff0c;一般认为QPS达到1000就算高并发&#xff0c;而不是像电商、抢红包等业务场景中&#xff0c;10W以上才算高并发&#xff0c;毕竟数据分析场景&#xff0c;数据海量&#xff0c;计算复杂&#xff0c;QPS能够达到1…

慕课热搜01

uniapp过滤器使用 创建一个过滤器&#xff1a; 在入口函数注册过滤器 // 注册过滤器 import * as filters from "./filters/index.js"Object.keys(filters).forEach(key>{Vue.filter(key,filters[key]) })使用过滤器&#xff1a; onPageScroll , uniapp监听滚动…

笙默考试管理系统-MyExamTest----codemirror(65)

笙默考试管理系统-MyExamTest----codemirror&#xff08;65&#xff09; 目录 一、 笙默考试管理系统-MyExamTest----codemirror 二、 笙默考试管理系统-MyExamTest----codemirror 三、 笙默考试管理系统-MyExamTest----codemirror 四、 笙默考试管理系统-MyExamTest---…

用友ERP软件-各个模块单据含义整理

一、采购管理模块各个单据的含义1、请购单 是指某人或者某部门根据生产需要确定一种或几种物料&#xff0c;并按照规定的格式填写一份要求&#xff0c;递交至公司的采购部以获得这些物料的单子的整个过程。所填的单据称为请购单 。 2、采购订单 是指企业采购部门在选定供应商之…

Edge无法卸载也无法上网的处理

1、在C盘把Microsoft下的子文件删掉&#xff0c;注意最好用delete删&#xff0c;别右键删&#xff01; 2、删掉用户文件夹下\AppData\Local\Microsoft\Edge\User Data下的所有文件 3、到微软官网下载最新的edge&#xff0c;再安装就可以了: https://www.microsoft.com/zh-cn…

Android 8.1 默认应用加入系统白名单

Android 8.1 默认应用加入系统白名单 近来收到项目反馈&#xff0c;需要将预置app加入系统白名单中&#xff0c;具体修改参照如下&#xff1a; /frameworks/base/data/data/deviceidle.xml <wl n"uPackageName"/>/frameworks/base/data/etc/platform.xml &l…

FlinkAPI开发之数据合流

案例用到的测试数据请参考文章&#xff1a; Flink自定义Source模拟数据流 原文链接&#xff1a;https://blog.csdn.net/m0_52606060/article/details/135436048 概述 在实际应用中&#xff0c;我们经常会遇到来源不同的多条流&#xff0c;需要将它们的数据进行联合处理。所以…

K-均值聚类算法及其优缺点(InsCode AI 创作助手测试生成的文章)

K-均值聚类算法及其优缺点 K-均值聚类算法是一种常用的无监督学习算法&#xff0c;用于将数据集划分为 K 个不同的类别。该算法的基本思想是根据数据点之间的距离&#xff0c;将它们划分为离其最近的 K 个簇之一。 算法的步骤如下&#xff1a; 初始化 K 个聚类中心&#xff…

【GDAL】Windows下VS+GDAL开发环境搭建

Step.0 环境说明&#xff08;vs版本&#xff0c;CMake版本&#xff09; 本地的IDE环境是vs2022&#xff0c;安装的CMake版本是3.25.1。 Step.1 下载GDAL和依赖的组件 编译gdal之前需要安装gdal依赖的组件&#xff0c;gdal所依赖的组件可以在官网文档找到&#xff0c;可以根据…

5个Linux归档命令

归档命令允许你将多个文件和目录捆绑到压缩归档文件中&#xff0c;以方便移植和存储。Linux 中常见的压缩包格式包括 .tar、.gz 和 .zip。 1. tar – 从归档文件中存储和提取文件 tar 命令可帮助你处理磁带归档文件&#xff08;.tar&#xff09;。它可以帮助你将多个文件和目…

中文语音识别转文字的王者,阿里达摩院FunAsr足可与Whisper相颉顽

君不言语音识别技术则已&#xff0c;言则必称Whisper&#xff0c;没错&#xff0c;OpenAi开源的Whisper确实是世界主流语音识别技术的魁首&#xff0c;但在中文领域&#xff0c;有一个足以和Whisper相颉顽的项目&#xff0c;那就是阿里达摩院自研的FunAsr。 FunAsr主要依托达摩…