Ionic Angular：ion-item-sliding标签文本截断方向调整咨询

直接通过调整HTML结构和自定义CSS就能实现左侧保留、右侧截断的效果，具体步骤如下：

1. 调整列表项HTML结构 #

确保ion-label被正确包裹在ion-item内，滑动操作按钮放在ion-item-options中：

<ion-list>
  <ion-item-sliding *ngFor="let example of examples">
    <ion-item>
      <!-- 给标签添加自定义类名，方便设置样式 -->
      <ion-label class="truncated-label">
        {{ example.ExampleName }}
      </ion-label>
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option (click)="editItem(example)">Edit</ion-item-option>
      <ion-item-option color="danger" (click)="deleteItem(example)">Delete</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

2. 添加自定义截断样式 #

在组件的.scss文件中添加以下样式，覆盖Ionic默认的布局限制：

.truncated-label {
  flex: 1; /* 让标签占据ion-item的剩余可用空间 */
  white-space: nowrap; /* 强制文本单行显示 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  min-width: 0; /* 关键：解决flex布局下子元素无法收缩的问题，避免文本被挤压隐藏 */
}

/* 可选：确保ion-item占满容器宽度，避免布局错位 */
ion-item {
  width: 100%;
}

原理说明 #

• flex:1 确保标签能利用ion-item的剩余空间，不会被操作按钮挤压；
• min-width:0 打破flex布局的默认规则，允许标签宽度随容器收缩，否则即使文本短，也可能因为flex子元素的最小宽度限制被隐藏；
• text-overflow: ellipsis 实现右侧截断并显示省略号，保留左侧核心内容。

内容的提问来源于stack exchange，提问作者David