ion-text-wrap not working inside ion-item and ion-row

Question

In my Ionic 5 app when I am using text inside ion-item or ion-row with class ion-text-wrap, the text is not wapprd. I am trying the following ways.

    <ion-item>
        <ion-label class="ion-text-wrap">
            {{myText}}
        </ion-label>
    </ion-item>


    <ion-item class="ion-text-wrap">
            {{myText}}
    </ion-item>

Answer 1

Use just text-wrap, instead of class="ion-text-wrap"

<ion-item>
        <ion-label text-wrap>
            {{myText}}
        </ion-label>
    </ion-item>

Answer 2

Here's an approach I would take in ionic5 with Angular: create a filter (pipe). This one will just try and find URLs and shorten the long ones but it could easily be extended to finding long words as well.

Your filter pipe (prep-text-pipe.pipe)

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'prepText'
})
export class PrepTextPipe implements PipeTransform {

    transform(textInput: string): any {
        if (textInput.trim()=="") {
            return;
        }
        // this is just going to find long URLs, surround them with <a href's and shorten them
        let urlRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
        return text.replace(urlRegex, function(url) {
            if (url.length > 10) {
                if (url.indexOf("://")!==-1) short_url =url.split("://")[1].substr(0,8) + "..." ;
                else short_url =url.substr(0,8) + "..." ;
                } else short_url = url;
            return '<a href="' + url + '" target="_blank">' + short_url + '</a>';
        });
     }

}

Your component.ts

import { PrepTextPipe } from '../shared/pipes/prep-text-pipe.pipe';

Your component.html Note that because we're returning HTML, I am using [innerHTML] rather than {{}}

<ion-item class="ion-text-wrap" [innerHTML]="myText | prepText">
</ion-item>

Answer 3

Including ion-text-wrap alone didn't work for me for long, unbroken strings. If you know your text is going to be a string like this (I was listing domains in ion-items), adding overflow-wrap: anywhere; did the trick and is pretty well supported (https://caniuse.com/wordwrap). Tested on Ionic 6.