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


#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

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!