Ion-text-wrap doesn't work

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.


<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-label class="ion-text-wrap">
      <ion-label [routerLink]="['/', 'posts', post.url]">{{post.title}}</ion-label>



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


<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>

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

<ion-label text-wrap>