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

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 类添加到项目.

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

到你的班级.

资料来源:离子论坛

Answer 4

离子 4

class="ion-text-wrap"

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

关联

Answer 5

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