Problem with long title into <ion-card-title>

Ionic Framework ionic-v3
1

Hi to everyone!
I have an <ion-card> with a <ion-card-content> and an <ion-card-title> inside of it.
The problem is that when the title of the card it’s too long, it’s truncated (as shown in the image)
Senza titolo 1

I would like to be able to see the entire title, so if the title it’s too long, it should go in the next line like this:
Senza titolo 1
How can I do it??

This is my code

<ion-card>
      <button ion-item (click)="openPlace(item)">
            <img src="assets/img/fontanamasini.jpg"/>
            <ion-card-content>
              <ion-card-title  style="font-size:20px"> {{item.myPoi.nome}}</ion-card-title >
              <ion-list *ngFor="let tag of item.tipo"> <p>{{tag} </p> </ion-list>
            </ion-card-content>
       </button> 
</ion-card>

Thank you!

2

Try to remove button tag and add

(click)="openPlace(item)"

in

<ion-card (click)="openPlace(item)">
3

You can add text-wrap to your title which will help to always display the full text:

 <ion-card-title  style="font-size:20px" text-wrap> {{item.myPoi.nome}}</ion-card-title >
4 Likes
4

Take a look at this page. text-wrap coud help to wrap your text :slight_smile:

5

Or you can simply reduce font size??
another solution is putting texts into a div and setting its width to 100%, give it padding of 5px.
and set your font size in em… then your text will be in that div container all the time.

6

I solved using text-wrap, thank you to everyone!

1 Like
7

text-wrap worked for me, Thnx!