CODEWITHSUNDEEP
ionic2
FrancescoMussi
FrancescoMussi

Reputation: 21610

How to use text-wrap for ion-card in Ionic 2?

THE SITUATION:

I need to use the text-wrap for an ion-card but it seems it doesn't work.

THE 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>

THE PLUNKER:

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

THE QUESTION:

There is a way to use text-wrap for the ion-card?

Upvotes: 6

Views: 21272

Answers (3)

jshook
jshook

Reputation: 1

white-space: normal; is correct. But it should be placed on the header tag IE h2. By default "ion-labels" (a class that can be injected into the DOM) have white-space: nowrap; applied to them. So setting white-space: normal; on the header tag selecting the ion-label tag through css will work.

Upvotes: 0

Jorge Vieira
Jorge Vieira

Reputation: 3064

<ion-card-header text-wrap>

you can use text-wrap in other components too.

Upvotes: 16

Ivar Reukers
Ivar Reukers

Reputation: 7719

Ok, setting white-space: normal; to the ion-card-header fixed this.

<ion-card-header style="white-space: normal;"> could be placed in css file as well.

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

Upvotes: 14

Related Questions