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

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 '' + short_url + '';
});
}
}
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>