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

Question

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

Answer 1

对于离子1：

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

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

对于离子2：

将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

如果您希望自定义CSS类具有相同的自动换行效果，请添加

white-space: normal;

到你的班级。

资料来源：ionic forum

Answer 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>

Answer 5

离子4

类=“离子文本换行”

  <ion-item>
    <ion-label class="ion-text-wrap">Long Text</ion-label>
  </ion-item>

Link