VueJS newline character is not rendered correctly

Question

I got the following problem, I read data string from an API which contains new line characters \n and I want to display them correctly in my template.

But when I do something like:

<p>{{ mytext }}</p>

The text is display with \n characters in it like normal text.

The text string from the response is in the format of "Hello, \n what's up? \n My name is Joe".

What am I doing wrong here?

you can try wrapping `mytext` in `
` tags or adding `white-space: pre;` css to your `
` tags — Andrew Lohr, Mar 13 '18 at 19:47

score 63 · Accepted Answer · answered Mar 13 '18 at 20:05

63

Not even a vue issue you could simply use CSS and apply white-space: pre; to the content. You shouldn't need an additional package for this.

new Vue({
  el: '#app',
  data: {
    text: 'Hello Vue.\nThis is a line of text.\nAnother line of text.\n'
  }
})

.pre-formatted {
  white-space: pre;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>

<div id="app">
  <div class="pre-formatted">{{ text }}</div>
</div>

answered Mar 13 '18 at 20:05

Lawrence Cherone

46,049
7
62
106

10

Note that if you need the text wrapped you can use ```white-space: pre-wrap;``` [more details](https://stackoverflow.com/questions/248011/how-do-i-wrap-text-in-a-pre-tag) – alemangui Mar 31 '20 at 16:28
2

`white-space: pre-wrap;` did the trick for me! Note that as it seems `white-space: break-spaces;` does a very similar thing. In fact, I couldn't distinguish it. – Fusseldieb Jul 24 '20 at 12:42

DobleL · Answer 2 · 2018-03-13T19:56:40.740

7

Use the <pre></pre> tag to preserve the preformated text. More info MDN Pre tag docs

new Vue({
  el: '#app',
  data: {
    text: 'Hello, \n what\'s up? \n My name is Joe'
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>

<div id="app">
  <pre>{{ text }}</pre>
</div>

edited Mar 13 '18 at 19:56

answered Mar 13 '18 at 19:49

DobleL

3,808
14
20

3

Don't link to w3schools for new users- the site has a history of having outdated material. MDN Docs should be used instead https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre – Andrew Lohr Mar 13 '18 at 19:54

2

Unfortunately the `

` tag overrides font styles, so this isn't a CSS-free solution.

– R-D May 01 '20 at 15:31

Abderrahim Soubai-Elidrisi · Answer 3 · 2018-03-13T19:51:51.193

1

I was facing same issus i was using vue-nl2br

check it here

Install

npm install --save vue-nl2br

Usage

import Nl2br from 'vue-nl2br'

Vue.component('nl2br', Nl2br)

View

<nl2br tag="p" :text="`myLine1\nmyLine2`" />

result :

<p>myLine1<br>myLine2</p>

edited Mar 13 '18 at 19:51

answered Mar 13 '18 at 19:47

Abderrahim Soubai-Elidrisi

5,025
1
26
36

5

You're saying OP has to download, install, and use a package just to show new lines?? – Andrew Lohr Mar 13 '18 at 19:48
Yes , but is not just show its converting /n tag to
– Abderrahim Soubai-Elidrisi Mar 13 '18 at 19:52
7

seems extremely excessive for that functionality – Andrew Lohr Mar 13 '18 at 19:53
1

Yes I agree :/ ! – Abderrahim Soubai-Elidrisi Mar 13 '18 at 19:53
2

Yes it is a little "over powered" for now it works maybe I find a better solution. If so I will post it here. – Tobias Schäfer Mar 13 '18 at 20:00
i've attached an example on my answer, you no need dependencies – DobleL Mar 13 '18 at 20:02
Saw it, much more easy... I know this property put this was nothing I came up with :D Thanks! – Tobias Schäfer Mar 13 '18 at 20:07

score 0 · Answer 4 · answered May 16 '21 at 19:26

This is a solution to split string in multiple <div> elements.

I use this also with i18n plugin and I like it because I don't need to touch CSS.

new Vue({
  el: '#app',
  data: {
    text: ['Hello Vue.','This is a line of text.','Another line of text.','']
  }
})

.pre-formatted {
  white-space: pre;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>

<div id="app">
  <div v-for="text of text">{{ text }}</div>
</div>

VueJS newline character is not rendered correctly

4 Answers4

Linked