一、问题:
原本传入的文本是有换行的,但是用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、最终展示效果👇
每行有空格,换行等,都能保持原本格式👇
最后,👏👏 😀😀😀 👍👍