Problem: The front-end receives and the back-end returns a newline character /n without a newline and does not take effect
solution:
1. Set the white-space property of css
<div class="text-container">{
{
text }}</div>
export default {
data() {
return {
text: '这是第一行\n这是第二行',
};
},
};
<style scoped>
.text-container {
white-space: pre-wrap;
}
</style>
2. Replace \n in the string with
, and then use v-html to render the string.
<div class="text-container">{
{
text }}</div>
export default {
data() {
return {
text: '这是第一行\n这是第二行',
};
},
};
this.text= resp.data.content.replace(/\n/g, '<br>')