The line break doesn't work in the firestore

Question

I use vue 3 and firestore.

When I was writing, Even though I pressed the enter key to break the line, it only works to write space.

in firestore

This is my code.

<div class="form-group">
  <textarea class="form-control" cols="30" rows="10" v-model="content" required></textarea>
</div>

---

await db.collection('forms').add(
      {
        title: title.value, content: content.value, createdAt, updatedAt, uid, name, views
      }
    )

How can I use line break?

Answer 1

Line breaks in Firestore are preserved as written, the issue is that the rendering mechanics inside Firestore are styled to ignore line breaks to preserve the structure of Firestore documents.

you can see this if you download the document snapshot and render the text inside a text area box, for a website, you may have to replace the newlines with a web safe alternative such as <br />

Answer 2

I just added style="white-space:pre-line" and it works!