I need an ion-grid with 3 columns. And the columns with first and last have size of content. In that column i would like to add icon or small image.And the column in center should have large text with overflow:hidden;text-overflow: ellipsis; white-space: nowrap;.
I tried with this code
<ion-grid>
<ion-row>
<ion-col size="auto" style="border: 1px solid;">
image
</ion-col>
<ion-col style="border: 1px solid;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
</div>
</ion-col>
<ion-col size="auto" style=" border: 1px solid; ">
icon
</ion-col>
</ion-row>
</ion-grid>
but i can't place the column in middle correctly.it displays in device max width (in separate row).how can i do this?