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

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

这里是完整的 HTML 来显示这个问题 Codepen

92435 次浏览
小开
最佳答案

离子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>
小开

如果希望自定义 CSS 类具有相同的字包装效果，只需添加

white-space: normal;

去你的班级。

资料来源: 离子论坛

小开

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

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

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

爱奥尼亚4号

Class = “ ion-text-wraps”

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

连结

小开

您可以使用 CSS 来做到这一点，而不需要像这样在 HTML 中添加 ionic 的可变垃圾

enter image description here

我认为这意味着任何离子标签内的离子项目的风格，以下风格..。


提交答案