如何在离子项中封装长字符串

Question

离子在离子项目中有两个关于单词包装的问题：

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>
</div>

下面是完整的HTML，以显示问题码页

Answer 1

离子1的：

将item-text-wrap 类添加到项中。

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

离子2的：

向item添加text-wrap 属性。

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

Answer 2

在Ionic 2中，使用text-wrap属性

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

Answer 3

对于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>

更新: 10/30/2019 - CSS实用程序属性现在在Ionic 4的最新版本中被废弃，并且将在Ionic 5中完全消失。

建议继续使用class="ion-text-wrap"：

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