离子列表中的离子注释会切断主要文本

Question

我正在使用离子3.我正在尝试列出事件名称位于左侧且事件记录（开始时间）位于离子注释中项目右侧的事件列表。这是我的代码：

  <ion-list *ngIf="events.length !== 0">
    <ion-item-group>
      <ion-item-divider>
        Upcoming events
      </ion-item-divider>
      <button ion-item *ngFor="let event of events" (click)="itemTapped($event, event)">
        {{event.name}}
        <ion-note item-right>{{event.start | date: 'HH:mm'}}</ion-note>
      </button>

    </ion-item-group>
  </ion-list>

如果我这样做，说明会正确地显示在右边，但主要文本（事件的名称）会被删除，最后插入一个省略号，即使它很合适。这是一张图片：

我查看了离子网站上的文档，我从这里复制了演示源代码：https://github.com/ionic-team/ionic/blob/master/demos/src/list/pages/page-one/page-one.html

有趣的是，它在展示中看起来不错，但粘贴到我的应用程序中它看起来就像我的例子一样。

问题是：如何使离子不切断列表中的主要文本？

感谢。

**更新：**我找到了解决方案。我为与不同页面关联的scss中的离子音符添加了一个css规则（最小宽度：75％），但也以某种方式应用于此页面。删除该CSS规则为我解决了这个问题。

Answer 1

在您的代码中，您使用 item-right 类，但在文档和演示源页面中，它是 item-end 。

请在此处检查项目展示位置属性： https://ionicframework.com/docs/api/components/item/Item/

如果这没有帮助，您可以尝试覆盖item-content的padding-right属性。