25

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?

1
  • you can try wrapping mytext in <pre> tags or adding white-space: pre; css to your <p> tags Mar 13, 2018 at 19:47

5 Answers 5

66

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>

2
  • 11
    Note that if you need the text wrapped you can use white-space: pre-wrap; more details
    – alemangui
    Mar 31, 2020 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, 2020 at 12:42
8

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>

2
  • 3
    Don't link to w3schools for new users- the site has a history of having outdated material. MDN Docs should be used instead developer.mozilla.org/en-US/docs/Web/HTML/Element/pre Mar 13, 2018 at 19:54
  • 2
    Unfortunately the <pre> tag overrides font styles, so this isn't a CSS-free solution.
    – R-D
    May 1, 2020 at 15:31
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>
7
  • 5
    You're saying OP has to download, install, and use a package just to show new lines?? Mar 13, 2018 at 19:48
  • Yes , but is not just show its converting /n tag to <br> Mar 13, 2018 at 19:52
  • 7
    seems extremely excessive for that functionality Mar 13, 2018 at 19:53
  • 1
    Yes I agree :/ ! Mar 13, 2018 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. Mar 13, 2018 at 20:00
0

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>

0

I had the same issue and I used CSS to resolve it.

new Vue({
  el: '#app',
  data: {
    yourText: 'Lorem ipsum dolor sit amet, \n consectetur adipiscing elit, \n sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \n \n Ut enim ad minim veniam, \n quis nostrud exercitation ullamco'
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<p id="app" style="white-space: break-spaces">{{yourText }}</p>

New contributor
Olivieris is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.