ion-text-wrap не работает внутри ion-item и ion-row

В моем приложении Ionic 5, когда я использую текст внутри ion-item или же ion-row с классом ion-text-wrap, текст не является пустым. Пробую следующие способы.

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


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

&amp;lt;img alt="введите описание изображения здесь" src="https://i.stack.imgur.com/mF4er.png"/&amp;gt;

Источник

3 ответа

Используйте только text-wrap, вместо class="ion-text-wrap"

      <ion-item>
        <ion-label text-wrap>
            {{myText}}
        </ion-label>
    </ion-item>
Источник

Включаяion-text-wrapодин мне не помог для длинных, непрерывных струн. Если вы знаете, что ваш текст будет такой строкой (я перечислял домены в ion-items), добавьтеoverflow-wrap: anywhere;сделал свое дело и довольно хорошо поддерживается ( https://caniuse.com/wordwrap ). Протестировано на Ionic 6.

Источник

Вот подход, который я бы использовал в 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>';
        });
     }

}

Ваш component.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>
Источник
Другие вопросы по тегам