如何在离子项中包装长字符串 [英] How to wordwrap a long string in ion-item

问题描述

IONIC在离子项中有关于自动换行的两个问题：
1.字符串会被末尾附加的点截断，如何显示没有点的完整内容？
2.自动换行和响应在Firefox中不起作用（Chrome还可以），如何在Firefox中修复此问题？

IONIC has two problems about word-wrap in ion-item: 1. String would be truncated by the dots appended at the end, how to show full content without dots ? 2. Automatic line breaks and responsive are not working in Firefox (Chrome is ok), how to fix this problem in 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

Any help would be much appreciated. Best Regards. Here is Full HTML to show the problem codepen

推荐答案

对于离子1：

只需添加 item-text-wrap class to item。

Just add item-text-wrap class to item.

<ion-item class="item-text-wrap">
        #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion 
</ion-item>

对于离子2：

只需将文本换行 属性添加到项目中。

Just add text-wrap attribute to item.

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

这篇关于如何在离子项中包装长字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！