Ion行元素换行问题：点击反转图标时汇率显示排版异常

看起来你的问题出在Ionic网格布局的列配置和元素排列方式上，col-7 offset-5的组合可能让容器宽度不足以容纳文本和图标，导致图标被迫换行。下面是具体的修复方案：

1. 调整布局结构，移除不必要的嵌套与列限制 #

原来的嵌套div加上col-7 offset-5会限制内容的可用宽度，而且offset-5会让左侧留出空白，但你需要整行左侧无内容，所以我们直接用ion-row的布局属性来控制内容靠右，同时让文本和图标处于同一层级：

<ion-row justify-content-end align-items-center class="rate-container">
  <!-- 正向汇率 -->
  <ion-label *ngIf="!showInverted" no-margin class="rate-text">
    1 {{transaction.SendCurrency}} = {{transaction.ExchangeRate | amountFormat}} {{transaction.PayOutCurrency}}
  </ion-label>
  <!-- 反向汇率 -->
  <ion-label *ngIf="showInverted" no-margin class="rate-text">
    1 {{transaction.PayOutCurrency}} = {{1/transaction.ExchangeRate | amountFormat}} {{transaction.SendCurrency}}
  </ion-label>
  <!-- 反转图标按钮 -->
  <ion-button 
    icon-only 
    (click)="toggleInverted()" 
    class="reverse-btn"
    no-margin 
    no-padding
  >
    <ion-icon name="swap"></ion-icon>
  </ion-button>
</ion-row>

2. 添加CSS确保元素同排且样式紧凑 #

通过CSS调整元素的显示方式和间距，避免换行：

.rate-container {
  /* 可选：给整行添加右侧内边距，避免内容贴边 */
  padding-right: 1rem;
}

.rate-text {
  /* 让文本容器可收缩，避免挤占图标空间 */
  flex-shrink: 1;
  /* 确保文本不会被截断（可选，根据需求调整） */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reverse-btn {
  /* 让图标按钮不收缩，固定宽度 */
  flex-shrink: 0;
  /* 调整按钮内边距，让图标更紧凑 */
  --padding-start: 0;
  --padding-end: 0;
  --min-height: auto;
  /* 和文本保持合适间距 */
  margin-left: 0.5rem;
}

关键修复点说明 #

• 用ion-row的justify-content-end替代offset-5和col-7，既实现内容靠右，又让整行左侧无空白，同时内容可以利用整行宽度。
• align-items-center确保文本和图标垂直居中对齐。
• 将图标按钮和汇率文本放在同一层级，避免嵌套容器的宽度限制导致换行。
• 通过flex-shrink属性控制元素的收缩优先级，确保图标不会被挤压换行。

这样调整后，反转图标就能和汇率文本保持在同一行，且整行左侧不会有多余内容啦！

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