Langer Titel in <ion-card-title> abgeschnitten

Question

Ich habe eine <ion-card> mit einer <ion-card-content> und eine <ion-card-title> innerhalb davon. Das Problem ist, dass, wenn der Titel der Karte, um sie zu lang ist, es abgeschnitten ist

(wie im Bild gezeigt)

Ich möchte in der Lage sein, den gesamten Titel zu sehen, also wenn der Titel es ist zu lang ist, sollte es in der nächsten Zeile weitergehen:

Wie kann ich es tun ??

Dies ist mein 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!

Answer 1

Sie können dafür text-wrap in ion-card-title verwenden.

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

Überprüfen Sie die link für andere in CSS Dienstprogramme gebaut.