如何在离子项目中自动换行长字符串

Question

IONIC 在 ion-item 中有两个关于自动换行的问题：

字符串会被末尾附加的点截断，如何显示没有点的完整内容？
自动换行和响应在 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>

这里是 Full HTML 来说明问题 codepen

Answer 1

对于离子 1:

添加 item-text-wrap class 到项目。

<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

如果你想让自定义的CSSclass也有同样的自动换行效果，只需要加上

white-space: normal;

给你的 class.

来源：ionic forum

Answer 3

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

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

Answer 4

对于 Ionic 4，在 ion-label 元素上使用 text-wrap，如下所示：

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

Answer 5

离子 4

class="ion-text-wrap"

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

Link

Answer 6

您可以使用 CSS 来做到这一点，而无需像这样向您的 HTML 添加 ionic 的挥发性垃圾

我认为这意味着在 ion-item 中使用以下样式设置任何 ion-label 的样式...

如何在离子项目中自动换行长字符串

How to wordwrap a long string in ion-item

word-wrap

ionic-framework