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

发布时间:2024年01月10日

一、问题:

原本传入的文本是有换行的,但是用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、最终展示效果👇

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

最后,👏👏 😀😀😀 👍👍???

文章来源:https://blog.csdn.net/weixin_71403100/article/details/135487599
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。