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

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;

到你的班级。

来源：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

您可以使用CSS做到这一点，而无需像在HTML中那样添加ionic的volatile垃圾

我认为这意味着用以下样式设置离子项目中的任何离子标签的样式...

Answer 6

离子4

class =“ ion-text-wrap”

Button

Link