ionic 4 ion-item display data on same line. If data is too long, then display only data that can be displayed

Question

I am using ion-item to display some data. The problem is data is too long so it is displaying it on many lines. What I want is to display data on a single line. The data that can't be displayed on a line should not be displayed. I have posted an image from Flipkart which is displaying the user's address on a single line. The part of an address that can't be displayed on a line hasn't been displayed.

Thank you in advance

here is my code :

<div *ngIf="yes_address">

      deliver to - {{pincode}} <br>

      <ion-item (click)="address_modal()">
        <p>
        {{address_line1}} , {{address_line1}} , {{landmark}} ,{{city}} , {{state}} -  {{pincode}}
      </p>
      <ion-button slot="end">change</ion-button>
        </ion-item>
    </div>

Answer 1

try this

<div *ngIf="yes_address">

      deliver to - {{pincode}} <br>

      <ion-item (click)="address_modal()">
        <ion-label>
        {{address_line1}} , {{address_line1}} , {{landmark}} ,{{city}} , {{state}} -  {{pincode}}
      </ion-label>
      <ion-button slot="end">change</ion-button>
        </ion-item>
    </div>

Hope it works