离子列表内的离子注释会截断主要文本

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>

如果这样做的话，便笺会正确显示在右侧，但是主要文本（事件的名称）会被切掉，并在末尾插入省略号，即使它很合适。 这是一张图片：

我已经检查了ionic网站上的文档，并从此处复制了演示源： 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属性。