如何停止 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 具有相同的大小。 並且文本不會自動換行。