How to get line breaks with Javascript and VUE

Question

In a response from an API I get a plain text that contains line breaks in this way:

"plain_text": "INFORMACION DEL PRODUCTO:\n\nProducto:

How can I use these line breaks (\n\n) when printing on WEB page with Javascript (I'm using VUE) ?

Since it only passes the text without the line breaks.

I add image of how it prints with VUE but in the inspector if it appears with the line breaks.

Here, this looks promising: https://stackoverflow.com/questions/784539/how-do-i-replace-all-line-breaks-in-a-string-with-br-tags — admcfajn, Dec 03 '18 at 05:13
I added an image of how it is printed with VUE but as I can see it with the inspector. I do not understand why in VUE it happens without the line breaks. :/ — OscarDev, Dec 03 '18 at 05:20

Phil · Accepted Answer · 2018-12-03T05:54:05.647

10

Use the CSS white-space property...

const res = {"plain_text": "\t\t\t\tINFORMACION DEL PRODUCTO:\n\nProducto:"}
new Vue({
  el: '#app',
  data: { res }
})

.pre-formatted {
  white-space: pre-wrap; /*  this is the important part */
  border: 1px dotted;
  padding: 1rem;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
  <p class="pre-formatted">{{res.plain_text}}</p>
</div>

edited Dec 03 '18 at 05:54

answered Dec 03 '18 at 05:23

Phil

157,677
23
242
245

@OscarDev I just changed it to `pre-wrap` based on a closer look at your images. This keeps the _indents_ as they appear without collapsing them into a single space character – Phil Dec 03 '18 at 05:26

score -1 · Answer 2 · answered Dec 03 '18 at 05:30

-1

In html white-spaces are compressed into a single space. Check this for a similar post.

To have line-breaks in rendered html, you have to manually replace the '\n' with <br/> tags.

answered Dec 03 '18 at 05:30

Kaashan

352
3
12

How to get line breaks with Javascript and VUE

2 Answers2