Insert a linebreak inside a ionic tag

Question

I'm using ionic to build an app and I want to insert a linebreak inside a ionic tag (that will render a String) so it can display correctly inside its container...

<h2>{{caravan.model}}</h2>

Solution 1

I solved my problem by adding the class "item-text-wrap" to add line breaks.

 <h2 class="item-text-wrap">{{caravan.model}}</h2>

Solution 2

One solution using Ionic2 is to use the innerHtml of a div

<div class="card-content" [innerHtml]="description"></div>

Now you can use any HTML tags like

<h1>, <br> or <p></p> etc..

in the prop description:string in typescript or javascript class

description:string = "<h1>My Header</h1> more text <br> and a break"

Comments

[Atula]

can you provide me fiddle. And if you are using ng-repeat then there is no need of adding line breaks, they are automatically added.

[Sephy]

I solved my problem...The only thing to do was adding "item-text-wrap" inside the class tag in order to add line breaks...Thank you for your answer, anyway.

[Atula]

great to know @AlisonLopez