ion-label is not displaying whole text in Ionic2

Question

I'm using ion-label inside ion-item, but the description is not displaying (instead it shows dot-dot.. ..) I want it to display whole text.. Is there any solution?

<ion-card *ngFor="let product of products">
    <img [src]="product.imageURL" />
    <ion-card-content>
        <ion-card-title primary [innerHTML]="product.title"></ion-card-title>
        <ion-item class="item-text-wrap">
        <ion-item>
            <ion-label primary>Description</ion-label>
            <ion-label [innerHTML]="product.description"></ion-label>
        </ion-item>
    </ion-card-content>
</ion-card>

Answer 1

UPDATE

You can also set the text-wrap attribute in the ion-card like this

<ion-card text-wrap *ngFor="let product of products">
...
</ion-card>

Bonus tip: If you put text-wrap (as an attribute, not as a class) in an ion-list, all items in that list will have the text-wrap effect applied. This way you don't need to put the text-wrap attribute in all items and this will help you making your app slightly optimized.

---

Old answer:

You can use a ion-textarea (disabled) to show the description. Find more information about the ion-textarea element here.

<ion-card *ngFor="let product of products">
    <img [src]="product.imageURL" />
    <ion-card-content>
        <ion-card-title primary>{{ product.title }}</ion-card-title>
        <ion-item>
            <ion-label primary>Description</ion-label>
            <ion-textarea rows="6" disabled [value]="product.description"></ion-textarea>
        </ion-item>
    </ion-card-content>
</ion-card>

The rows attribute allows you to set how many rows do you want to show, according to how long the text of the description is. By using the disable attribute, the ion-textarea is similar to a label, but showing more than one line of content. And last but not least, I use the value attribute to set the content of the element with the product's description.

A few comments about your code:

1. You're opening two ion-item elements, but closing only one of them

   <ion-item class="item-text-wrap">
           <ion-item>
           <!-- ... -->
   </ion-item>
   

2. Instead of using the [innerHTML] attribute binding with the product title, you can just use interpolation

   <ion-card-title primary>{{ product.title }}</ion-card-title>