Ionic framework 离子标签导致离子行中的换行

在我的Ionic 5项目中，我正在创建一个

离子网格

，其中一行将包含3列。下面是代码

<ion-grid>
    <ion-row>
      <ion-col size="auto" class="ion-no-padding">
        <ion-avatar>
         ...
        </ion-avatar>
      </ion-col>
      <ion-col>
        <ion-row>
          <ion-label>{{userName}}</ion-label>
        </ion-row>
        <ion-row>
          ...
        </ion-row>
      </ion-col>
      <ion-col size="auto">
        <ion-button size='small' fill='clear'>
          <ion-icon slot="icon-only" name="ellipsis-horizontal"></ion-icon>
        </ion-button>
      </ion-col>
    </ion-row>
</ion-grid>

由于我使用的是

ion-label

，因此这三列并没有停留在一行中，

ion-label

在第二行中占据了整个宽度。我不想为包含

离子标签的列指定列大小，因为它会影响更改方向时最后一列按钮的位置。请帮忙

ion-label{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}