How to make <p> in ion-item list a max of 2 lines

Here is how it looks with text-wrap: normal

image

and Wiith no custom css image

I want to be able to set it to a maximum # of lines (i.e. 2 or 3)

The code

<ion-searchbar
  [showCancelButton]="shouldShowCancel"
  [placeholder]="'Search for Products'"
  showCancelButton="true">
</ion-searchbar>

<ion-list>
  <ion-item class="item-text-wrap" *ngFor="let product of products" (click)="onProductSelect($event)">
    <ion-thumbnail item-left>
      <img src="../../assets/starline_logo.png">
      <!--<p class = "wrapText"> {{ product.prodDesc }} </p>-->
    </ion-thumbnail>
    <h2> {{ product.prodName }} </h2>
    <p class = "wrapText"> {{ product.prodDesc }} </p>
  </ion-item>
</ion-list>

Hi did you find any solution for this issue?

hey there! I won’t say that this is a good solution but it worked for me. Just add this inline css and you are good to go for 2 lines.

<p style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-height: 16px; max-height: 32px; -webkit-box-orient: vertical">{{myText}}</p>

Let me know if it helps
Cheers!!!

2 Likes

Thanks its working i add it in my P tag nd its working

1 Like