Text Wrapping h2 tag in an Ion-List


#1

I know I can use ionic’s “item-text-wrap” on the main ion-item of my ng-repeated list. However, the issue is that I have an article with the title displayed as <h2>{{article.title}}</h2> which I want wrapped, but in the same item under that title I have <p>{{article.description}}</p> which I do not want to text wrap. Is there a way to text wrap one element but not the other?


#2

make a class for the h2 tag only and add the text-wrap property to that h2 tag(ellipsis etc etc…)


#3

item-text-wrap doesn’t work for the h2 tag in this situation, and my article titles automatically have the ellipsis from ionic (which I want to avoid, and rather text-wrap).


#4

i mean you need to have a css for h2 tag like:

<h2 class="custom"></h2>

.custom {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}

#5

Adding that to my <p> tag while keeping the item-text-wrap class in the ion-item resolved the issue. Basically force it to not wrap. Thanks!