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

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

      <button ion-item (click)="openPlace(item)">
            <img src="assets/img/fontanamasini.jpg"/>
              <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>

Thank you!

Try to remove button tag and add



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

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 >


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

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.

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

1 Like

text-wrap worked for me, Thnx!