当前位置: 首页> 健康> 美食 > vue使用v-html保留原内容的缩进和换行

vue使用v-html保留原内容的缩进和换行

时间:2025/7/14 3:31:37来源:https://blog.csdn.net/chaodaibing/article/details/141417632 浏览次数:0次

在vue中v-html是一个非常有用的工具,比如从后端读取日志,就这么搞

<div class="context" ref="cnt_log" v-html="logdata"></div>

然后一个触发函数,返回logdata的数据即可。不过这个时候,估计会发现,怎么返回到页面的格式不对劲啊,全挤成了一坨,没有换行,也没有原有的缩进,比如
在这里插入图片描述
其实一招就解决了,无需后端特殊处理比如行尾都加上<br>啥的,只要给div加个样式即可

.context {word-break: normal;		#自动换行 width: auto; height: 700px;white-space:pre-wrap;     #保留原内容的换行和缩进word-wrap : break-word ;overflow: scroll;         #溢出的内容显示为滚动条,而不是溢出页面background-color: black;color: #83fcf5;           #字体颜色padding: 15px;
}

然后就正常了,看着简单,我也是折腾了很久呢
在这里插入图片描述

关键字:vue使用v-html保留原内容的缩进和换行

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: