CODEWITHSUNDEEP
ionic-frameworktextword-wrapionic5ion-item
Tapas Mukherjee
Tapas Mukherjee

Reputation: 2178

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

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>

enter image description here

Upvotes: 0

Views: 2086

Answers (3)

sazerac
sazerac

Reputation: 310

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.

Upvotes: 0

Kinglish
Kinglish

Reputation: 23654

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>

Upvotes: 0

Ani
Ani

Reputation: 938

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

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

Upvotes: 1

Related Questions