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.

could you use a <br> tag?

admcfajn
– admcfajn

2018-12-03 05:08:42 +00:00
Commented Dec 3, 2018 at 5:08 — admcfajn
– admcfajn, Commented Dec 3, 2018 at 5:08
Yes but I get these line breaks from the API call

OscarDev
– OscarDev

2018-12-03 05:09:56 +00:00
Commented Dec 3, 2018 at 5:09 — OscarDev
– OscarDev, Commented Dec 3, 2018 at 5:09
@admcfajn you mean to use replace?

OscarDev
– OscarDev

2018-12-03 05:11:44 +00:00
Commented Dec 3, 2018 at 5:11 — OscarDev
– OscarDev, Commented Dec 3, 2018 at 5:11
I think vue will not admit that.

eag845
– eag845

2018-12-03 05:14:22 +00:00
Commented Dec 3, 2018 at 5:14 — eag845
– eag845, Commented Dec 3, 2018 at 5:14
@eag845 It does not work with VUE as you say

OscarDev
– OscarDev

2018-12-03 05:18:51 +00:00
Commented Dec 3, 2018 at 5:18 — OscarDev
– OscarDev, Commented Dec 3, 2018 at 5:18

Phil · Accepted Answer · 2018-12-03 05:54:05Z

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/[email protected]/dist/vue.min.js"></script>
<div id="app">
  <p class="pre-formatted">{{res.plain_text}}</p>
</div>

edited Dec 3, 2018 at 5:54

answered Dec 3, 2018 at 5:23

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phil Over a year ago

@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

Kaashan · Accepted Answer · 2018-12-03 05:30:13Z

-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 3, 2018 at 5:30

Kaashan

3821 gold badge4 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to get line breaks with Javascript and VUE

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related