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

Here is how it looks with text-wrap: normal


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

  [placeholder]="'Search for Products'"

  <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>-->
    <h2> {{ product.prodName }} </h2>
    <p class = "wrapText"> {{ product.prodDesc }} </p>

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


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

1 Like