Ion-text-wrap doesn't work

Ionic Framework
1

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

Screenshot%20(1)

any idea?

2

Text-wrap was a directive in v3, have you tried using that?

3

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!

4

Odd! Maybe plain ol’ CSS?

5

@danieldugger how do i check that?

6

https://www.w3schools.com/cssref/css3_pr_word-wrap.asp

7

@danieldugger no i meant how to check if css file are loaded Or which part I can add new class for it?
:slight_smile:

8

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

9

Try

<ion-label text-wrap>

Using the directive without the ion- prefix

1 Like
10

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

11 
<ion-label text-wrap>