原本传入的文本是有换行的,但是用div展示接口返回的文本,所示内容没有保持原有格式没达到换行效果
以下是传入到接口的文本格式
使用div标签展示接口返回的文本,但并没有保持原有格式,文本也没换行
?<div class="value line14">{{ printData }}</div> ?
div展示文本是没有换行的, 其中printData是从接口获取存入的文本
要保留原有的内容格式,且文本有换行
<pre class="value line14">{{ printData?}}</pre>
此时文本会保留原因的内容格式, 且有换行,
但是:<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>
每行有空格,换行等,都能保持原本格式👇
最后,👏👏 😀😀😀 👍👍???