如何在 ion-item 中对长字符串进行自动换行答案

【问题标题】：How to wordwrap a long string in ion-item如何在 ion-item 中对长字符串进行自动换行
【发布时间】：2021-12-16 17:23:44
【问题描述】：

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>

这里是显示问题的完整 HTML codepen

【问题讨论】：

标签： ionic-framework word-wrap

【解决方案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>

【讨论】：

我使用 class="wrap item-text-wrap" style="word-wrap: break-word; word-break: break-all;"，现在可以使用了，谢谢。跨度>
它也适用于 ionic 4。谢谢。但它会减小文本大小。再次感谢:)

【解决方案2】：

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

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

【讨论】：

嗨，没有文本换行的 ion-item 仅显示一行带有省略号..如何将其配置为允许 2 行然后省略号...在检查 ion-item 时，设置在 @ 987654324@ 其中包括 text-overflow ， overflow 和 white-space 你能帮忙吗，谢谢
这是正确的。在 ionic 3 上尝试过并修复它。
这似乎对我不起作用。我不得不将<ion-label> 更改为white-space: normal;
它也适用于 ionic 4。谢谢。但它会减小文本大小。再次感谢:)

【解决方案3】：

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

更新：2019 年 10 月 30 日 - 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】：

如果你想让自定义的 CSS 类具有相同的自动换行效果，只需添加

white-space: normal;

到你的班级。

来源：ionic forum

【讨论】：

【解决方案5】：

离子 4

class="ion-text-wrap"

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

Link

【讨论】：

【解决方案6】：

您可以使用 CSS 来实现，而无需像这样将 ionic 的 volatile-garbage 添加到您的 HTML 中

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

【讨论】：