Align items by adding new line

Ionic Framework ionic-v3
1

Hi, I am working on a menu in which I have displayed items. The problem I am facing is that when the name of my item is too long it wraps to the next line and this creates unevenness for the other items whose names does not wrap to a new line. How do I modify my code such that I can add a second line for all items and so if any item name were to wrap, the name can occupy the second line without disrupting the alignment.

A sample of my code for my item name is as follows

 <ion-row>
        <ion-col col-lg-12 col-12>
          <div>
            <h2 style="font-size: 10px;" text-center>
              <strong> {{product.name}}</strong>
            </h2>
          </div>
        </ion-col>
</ion-row>

ss

Your help is much appreciated!

Thanks!

2

You can add style on title

.title {
  text-overflow: ellipsis;
  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}
3

Hi,

Thank you for your solution. It works great! Although I now have the problem where the name of the item is not shown completely. Do you know of a way where I can show the item name completely? Alternatively, I think an ideal approach would be to add a new line to every item such that even though the item name wraps, it is completely shown. Do you know how I may be able to do this?

Thank you for your time!

image