I am using ionic 4 and in my list items I have some long labels that required to use wrap but somehow it doesn’t work.
code
<ion-list *ngIf="category">
<ion-item *ngFor="let post of category.posts">
<ion-thumbnail slot="start">
<img [routerLink]="['/', 'posts', post.url]" [src]="post.image">
</ion-thumbnail>
<ion-label class="ion-text-wrap">
<ion-label [routerLink]="['/', 'posts', post.url]">{{post.title}}</ion-label>
</ion-label>
</ion-item>
</ion-list>
result
any idea?
Text-wrap was a directive in v3, have you tried using that?
yes i did, result was the same. I assumed this ion-text-wrap
should be working in v4 as is in v4 docs but no it doesn’t!
Odd! Maybe plain ol’ CSS?
@danieldugger how do i check that?
@danieldugger no i meant how to check if css file are loaded Or which part I can add new class for it?
There are a number of SCSS files that you can review within the project that come with it out of the box.
Have you tried word-wrap? You could just do it inline to see if it gives you the desired outcome. If it does, you could create a class within that page’s SCSS file
jjdev
May 25, 2019, 4:36pm
9
Try
<ion-label text-wrap>
Using the directive without the ion-
prefix
1 Like
Silly of me! I was using label in label
<ion-label class="ion-text-wrap">
<ion-label [routerLink]="['/', 'posts', post.url]">{{post.title}}</ion-label>
</ion-label>
so i removed my extra label and css working just fine
<ion-label class="ion-text-wrap" [routerLink]="['/', 'posts', post.url]">{{post.title}}</ion-label>
thanks guys