Ion-card-title with line break

Ionic Framework ionic-v3
1

Hey everybody. I’m developing a new app with ion-card. I need to display some strings inside ion-card-content - which I retrieve from Firebase - and the line breaks just aren’t being considered. It’s like a one big paragraph.

Example:
What I’m trying to achieve is this:
This is the fist line of the paragraph.

This is the second one.

This is the third one.

And when I do this:

<ion-card-content>
  {{ myString }}
</ion-card-content>

I get this:

This is the second one. This is the third one.

Thanks!

2

use “< pre >” tag

https://www.w3schools.com/tags/tag_pre.asp

<ion-card-content>
  <pre>{{ myString }}</pre>
</ion-card-content>
2 Likes
3

CSS’s white-space property is preferable to using <pre>.

1 Like
4

Try setting white-space property to pre-line.It will work.
white-space:pre-line;