ion-text-wrap 在 ion-item 和 ion-row 内不起作用答案

【问题标题】：ion-text-wrap not working inside ion-item and ion-rowion-text-wrap 在 ion-item 和 ion-row 内不起作用
【发布时间】：2021-05-20 15:47:23
【问题描述】：

在我的 Ionic 5 应用程序中，当我在 ion-item 或 ion-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>

【问题讨论】：

它似乎正在工作。 HTML 不会换行没有任何空格或标点符号的文本，例如 132456789011 ..... 您可以考虑为超长不间断字符串（例如 URL）准备文本字符串
@Kinglish，当我使用div 代替ion-item 时，它会包含所有内容。我主要担心的是长网址。你能解释一下你准备文本是什么意思吗？

标签： ionic-framework text word-wrap ionic5 ion-item

【解决方案1】：

只使用text-wrap，而不是class="ion-text-wrap"

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

【讨论】：

谢谢！ @阿尼。这行得通。对于<ion-row>，我只需要先在里面放一个<ion-item>，然后再放一个<ion-label>。对于 Ionic 5，正确的语法是 class="ion-text-wrap"

【解决方案2】：

这是我在 ionic5 中使用 Angular 的一种方法：创建一个过滤器（管道）。这个只是尝试查找 URL 并缩短长的，但它也可以很容易地扩展到查找长的单词。

您的过滤器管道 (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';

你的 component.html 请注意，因为我们要返回 HTML，所以我使用的是 [innerHTML] 而不是 {{}}

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

【讨论】：