今天使用jsoup爬取了某网站的文本,然而,在vue渲染的时候出现了问题,所有段落都没有换行,段落之间的换行变成了空格。于是我在idea中输出文本,在vscode中查看源码,发现,都是换行的,唯独渲染出来的文本没有换行,我开始怀疑是vue渲染不识别html中的换行符的问题。
查阅了资料,果然如此,后端返回的文本是带有\n换行符,但Vue将其插值渲染后,文本换行符显示为一个空格。
解决方法:
方法1.将字符串里的\n替换为<br>,然后用v-html指令渲染字符串。
<template>
<div v-html="content">
{{content}}
</div>
</template>
js:
= (/\n/g, '<br>')
方法2. 设置css的white-space属性
<style scoped>
.content-wrapper {
white-space: pre-wrap;
}
</style>