How to use a text wrapper for an ion map in Ionic 2?

Question

SITUATION :

I need to use text-wrap for an ion map, but it doesn't seem to work.

CODE :

 <ion-card> <ion-card-header text-wrap> <h2> <ion-icon name="list-box"></ion-icon> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labor</h2> </ion-card-header> <ion-card-content> <p>content</p> </ion-card-content> </ion-card> 

PLANKER :

http://plnkr.co/edit/z5ehOQgz0oArhg6mMtUj?p=preview

QUESTION :

Is there a way to use a text wrapper for an ion map?

Answer 1

So, installing white-space: normal; on ion-card-header fixed.

<ion-card-header style="white-space: normal;"> can also be placed in a css file.

Plunker: http://plnkr.co/edit/GjDmJBNMdnoPiteAKpDB

Answer 2

 <ion-card-header text-wrap> 

You can also use text wrapping in other components.

Answer 3

white-space: normal; is correct. But it should be placed in the IE h2 header tag. By default, "ionic labels" (a class that can be entered into the DOM) have white-space: nowrap; to them white-space: nowrap; . Thus, setting white-space: normal; in the title tag, which will be marked with the label ion-label via css.