Save line breaks from String in JavaScript object to transfer over to breaks in HTML-CodePudding

sorry if this a pretty basic question but I'm trying to store a multi-paragraph chunk of text in an object in a Pinia store to be converted to text in HTML, but I can't figure out how to transfer paragraph breaks through the Pinia store.

export const useContentStore = defineStore('contentStore', {
  state: () => {
    return {
      guides: [{
        description: 'Paragraph one. Paragraph two. Paragraph three.',
      }],
    }
  },
})

<template>
  <main >
    <body>
      <p>{{ content.description }}</p>
    </body>
  </main>
</template>

I'd like there to be some space between each paragraph, I don't know if that would be adding another line between them or something different. I've already tried escaping like \n, adding <br> tags in the text, and using template literals.

This is what my end goal is:

Paragraph one.

Paragraph two.

Paragraph three.

Thanks for any help you can give!

CodePudding user response：

p {
  white-space: pre-wrap
}

<p>
Paragraph one.

Paragraph two.

Paragraph three.
</p>

As you can see above, if you use css property white-space: pre-wrap, it can do what you ask, but be carefull, it may cause other weird interactions. It will preserve whitespaces, newlines, tabs and <br />.