Как сложить длинную строку в ионном элементе

IONIC имеет две проблемы с переносом слов в ионном элементе: 1. Строка будет усечена точками, добавленными в конце, как показать полный контент без точек? 2. Автоматические разрывы строк и отзывчивость не работают в Firefox (Chrome в порядке), как исправить эту проблему в Firefox?

<div class="row responsive-sm">
<div class="col">
    <div class="item item-body">
        <ion-item class="wrap" style="word-wrap: break-word; word-break: break-all;">
        #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion 
        </ion-item>
    </div>
</div>

Любая помощь будет высоко оценена. С наилучшими пожеланиями. Вот полный HTML, чтобы показать проблему codepen

Ответы

Ответ 1

Для ионной 1:

Добавить item-text-wrap класс элемента.

<ion-item class="item-text-wrap">
  some long string
</ion-item>

Для ионного 2:

Добавить атрибут text-wrap к элементу.

<ion-item text-wrap>
  some long string
</ion-item>

Ответ 2

В Ionic 2 используйте атрибут text-wrap

<ion-item text-wrap>
  text here wraps to multiple lines
</ion-item>

Ответ 3

Если вы хотите, чтобы пользовательский класс CSS имел один и тот же эффект переноса слов, просто добавьте

white-space: normal;

для вашего класса.

Источник: ионный форум

Ответ 4

Для Ionic 4 используйте text-wrap для элемента ion-label, например так:

<ion-item>
    <ion-label text-wrap>
         Multiline text that should wrap when it is too long
         to fit on one line in the item.
    </ion-label>
  </ion-item>