如何停止 ion-text-nowrap 打破离子卡内的离子网格

Question

我有一个只有一行的网格，并使用 ngFor 为每个单元格循环多列。 在每个单元格的第一行内，离子项包裹一个缩略图和 label。 下面有 1 行，2 列。 示例代码。

<ion-grid>
    <ion-row>      
      <ion-text color="primary"><h1>Title</h1></ion-text>
    </ion-row>
    <ion-row>
      <ion-col *ngFor="let s of sList">
        <ion-card>
          <ion-row>
            <ion-item>
              <!--  picture -->
              <ion-thumbnail slot="start">
                <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
              </ion-thumbnail>
              <ion-label>id : </ion-label>
            </ion-item>
          </ion-row>
          <ion-row >
            <ion-col >         
                <div class="ion-text-nowrap">This is content left</div>
            </ion-col>
            <ion-col >            
                <div class="ion-text-nowrap">This is content right</div>
            </ion-col>
          </ion-row>
        </ion-card>
      </ion-col>
    </ion-row>
 </ion-grid>

我的问题是在桌面模式（1440x1062）上，添加 ion-text-nowrap 属性后，列被解释为整行，并像这样在下面的行中强制另一列换行。

但我想要实现的是这样的，上面的代码有效，但只在移动范围内，

一旦到达平板电脑范围（768px），就会出现上述问题。

如何确保 text-no-wrap 不会影响平板电脑视图并确保那些 2 列并肩保持？

Answer 1

我现在找到了答案，这与设置 col 大小有关。 出于某种原因， ion-col 大小属性 auto 与不设置一个不同。 区别似乎是：

设置大小自动 -

• 为每个列设置相同的动态大小

不设置大小自动 -

• 为不同的col设置不同的动态大小

所以代码将是这样的：

<ion-col size="auto" *ngFor="let s of sList">
    <ion-card >
        <ion-row>
            <ion-item>
              <ion-thumbnail slot="start">
                <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
              </ion-thumbnail>
              <ion-label>label</ion-label>
            </ion-item>
          </ion-row>
          Small title --
          <ion-row>
            <ion-col><div class="ion-text-nowrap">a__item : xxxx</div></ion-col>
            <ion-col><div class="ion-text-nowrap">b____item xxxx</div></ion-col>
          </ion-row>
          <ion-row>
            <ion-col><div class="ion-text-nowrap">a__item : xxxx</div></ion-col>
            <ion-col><div class="ion-text-nowrap">b____item xxxx</div></ion-col>
          </ion-row>
        </ion-card>
</ion-col>

现在 col 不会扩展整行，每个 col 具有相同的大小。 并且文本不会自动换行。