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

一、问题:

原本传入的文本是有换行的,但是用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.hqwc.cn/news/337499.html

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

相关文章

虚拟机VMware安装Linux

关于安装&#xff0c;安装版本是CentOS 7&#xff0c;选择最小安装即可 第一步&#xff1a;选择创建新的虚拟机 第二步&#xff1a;默认典型&#xff0c;点击下一步 第三步&#xff1a;选择稍后安装操作系统 第四步&#xff1a;选择Linux和版本 第五步&#xff1a;输入虚拟机名…

【UE Niagara学习笔记】06 - 制作火焰喷射过程中飞舞的火星

在上一篇博客&#xff08;【UE Niagara学习笔记】05 - 喷射火焰顶部的蓝色火焰&#xff09;的基础上继续实现喷射火焰的火星的效果。 目录 效果 步骤 一、创建材质实例 二、添加新的发射器 2.1 设置粒子材质 2.2 设置发射器持续生成粒子 2.3 设置粒子生成数量 2.4 设…

一、电脑重装[原版、PE]

一、电脑重装 解释&#xff1a;本文章没有详细的步骤&#xff0c;只有总体思路&#xff0c;具体每一步的落实&#xff0c;建议对照本文思路查询b站 1.原版安装 优点&#xff1a;这样安装的系统很干净&#xff0c;不会被安装上奇奇怪怪的软件&#xff0c;也比较安全 缺点&…

有哪些简单、免费、适合中小型企业的 CRM 软件?

简单、免费且适合中小型企业使用的CRM系统&#xff1f; 国内外这类系统还是不少的&#xff0c;比如HubSpot CRM提供免费的CRM核心功能&#xff0c;Freshsales提供免费的基本CRM功能&#xff0c;Bitrix24、Capsule CRM提供免费版……这些工具可以帮助企业管理客户信息、跟进销售…

领域驱动模型之各层实体严格分层处理

为什么要分层处理呢&#xff1f; 在领域驱动模型中&#xff0c;分为应用层&#xff08;application&#xff09;、领域层&#xff08;domain&#xff09;、基础设施层&#xff08;infrastructure&#xff09;。各层只能处理和访问自己所属层的 entity 或者 dto 对象&#xff0…

软件测试|MySQL逻辑运算符使用详解

简介 在MySQL中&#xff0c;逻辑运算符用于处理布尔类型的数据&#xff0c;进行逻辑判断和组合条件。逻辑运算符主要包括AND、OR、NOT三种&#xff0c;它们可以帮助我们在查询和条件语句中进行复杂的逻辑操作。本文将详细介绍MySQL中逻辑运算符的使用方法和示例。 AND运算符 …

门店管理系统驱动智慧零售升级

在当今数字化经济的大潮中&#xff0c;实体门店正在经历一场由内而外的深度变革。门店管理系统以其高效、便捷和全面的功能特性&#xff0c;为实体店提供了高效的运营解决方案。 门店管理系统拜托了传统零售业对本地化软件的依赖&#xff0c;它将复杂的信息技术转化为易于获取…

【obj To 3DTiles 格式转换】 可以自定义经纬高、属性表等参数 (一)

目录 0 引言1 3DTiles数据2 objTo3DTiles2.1 工具的安装2.1.1 拓展&#xff1a;Node.js 和 npm 2.2 工具的使用2.2.1 输出成瓦片数据2.2.2 输出带有坐标参数的瓦片数据 3 查看3DTiles数据 &#x1f64b;‍♂️ 作者&#xff1a;海码007&#x1f4dc; 专栏&#xff1a;Cesiumfor…

公司网站被攻击了该怎么办,教你如何解决网站被攻击的办法!

最近企业网站被攻击的比较多&#xff0c;碰到这些情况我们都很深恶痛绝&#xff0c;好好的一个站&#xff0c;而且用了很长时间的网站和域名就这样废掉了&#xff0c;实在是可惜。今天主要给大家分享一下&#xff0c;什么样的网站容易被攻击&#xff0c;网站被攻击后该如何处理…

科技感十足界面模板

科技感界面 在强调简洁的科技类产品相关设计中&#xff0c;背景多数分为&#xff1a;颜色或写实图片两种。 颜色很好理解&#xff0c;大多以深色底为主。强调一种神秘感和沉稳感&#xff0c;同时可以和浅色的文字内容形成很好的对比。 而图片背景的使用&#xff0c;就要求其…

从零学Java List集合

Java List集合 文章目录 Java List集合1 List 集合2 List实现类2.1 ArrayList【重点】2.2 LinkedList2.3 Vector (已废弃) 3 数据结构: 栈, 队列 1 List 集合 特点&#xff1a;有序、有下标、元素可以重复。 有序: 添加与遍历的顺序是一致的;有下标: 可以使用普通for循环;元素可…

从生活入手学编程(1):Edge浏览器设置自动刷新专业教程

一、前言 我们都知道&#xff0c;Edge浏览器运行时的速度卡的实在是感人…… 于是今天&#xff0c;我就突发奇想&#xff0c;来看一看怎么刷新并且还能保留页面内容。 二、探索 首先&#xff0c;我在此提醒您&#xff0c;在使用这种方法时要非常小心。因为更改网页源代…