Ionic ion-text-wrap在ion-item和ion-row内不工作

qf9go6mv  于 2023-08-01  发布在  Ionic
关注(0)|答案(3)|浏览(133)

在我的Ionic 5应用程序中,当我在ion-itemion-row中使用类ion-text-wrap的文本时,文本不是wapprd。我正在尝试以下方法。

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

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

字符串


的数据

vdgimpew

vdgimpew1#

仅使用text-wrap,而不是class="ion-text-wrap"

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

字符串

m3eecexj

m3eecexj2#

下面是我在ionic 5中使用Angular的方法:创建过滤器(管道)。这一个将只是尝试和寻找网址和缩短长的,但它可以很容易地扩展到寻找长的话,以及。
您的过滤器管道(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>';
        });
     }

}

字符串
您的组件.ts

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


注意,因为我们返回的是HTML,所以我使用的是[innerHTML]而不是{{}}

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

qmelpv7a

qmelpv7a3#

只包含ion-text-wrap对我来说不适用于长的、不间断的字符串。如果你知道你的文本将是一个这样的字符串(我在ion-items中列出了域名),添加overflow-wrap: anywhere;就可以了,并且得到了很好的支持(https://caniuse.com/wordwrap)。在Ionic 6上测试。

相关问题