如何顯示離子應用程序中文本的隱藏部分？

Question

我正在構建一個ionic 3應用程序，有一個問題，我無法顯示完整的文本，由於文本內容太長，它們的一部分被自動隱藏。

然后...

如何顯示離子應用程序中文本的隱藏部分？ 在上面捕獲的屏幕中可以看到，部分時間文本被隱藏為... html中的相應代碼如下：

<ion-label> Select Trip </ion-label>
<ion-select [(ngModel)]="tripid" (ionCancel)="onCancel()" (ionChange)="onChange()">
  <ion-option *ngFor="let subtrip of trips" [value]="subtrip.id">
    {{subtrip.startTime}} - {{subtrip.stopTime}}
  </ion-option>
</ion-select>

Answer 1

在ionic 3中，您需要覆蓋css，這似乎可以正常工作：

.alert-ios .alert-radio-label {
  white-space: unset !important;
}

.alert-md .alert-radio-label {
  white-space: unset !important;
}

.alert-wp .alert-radio-label {
  white-space: unset !important;
}

演示： StackBlitz

Answer 2

您可以通過在ion-option上設置一個類來調整文本，以使其下次出現。例如，

<ion-option class="adjust-text".....

.adjust-text {
    white-space: normal;
    overflow: visible;
}

它應該可以正常工作而不會overflow: visible盡管overflow: visible 。

Answer 3

在您的global.css中添加

.alert-radio-label {
  text-overflow: initial !important;
  white-space: pre-line !important;
}

Answer 4

您尚未澄清，但這看起來像Ionic 4代碼。

控制此問題的正確方法是使用內置的ion-text-wrap類：

CSS實用程序-Ionic文檔

我認為這需要繼續進行ion-option ：

<ion-label> Select Trip </ion-label>
<ion-select [(ngModel)]="tripid" (ionCancel)="onCancel()" (ionChange)="onChange()">
  <ion-option class="ion-text-wrap" *ngFor="let subtrip of trips" [value]="subtrip.id">
    {{subtrip.startTime}} - {{subtrip.stopTime}}
  </ion-option>
</ion-select>

但是如果不是/也許也在ion-select ：

<ion-label> Select Trip </ion-label>
<ion-select class="ion-text-wrap" [(ngModel)]="tripid" (ionCancel)="onCancel()" (ionChange)="onChange()">
  <ion-option class="ion-text-wrap" *ngFor="let subtrip of trips" [value]="subtrip.id">
    {{subtrip.startTime}} - {{subtrip.stopTime}}
  </ion-option>
</ion-select>

更新

現在，您已經指定了Ionic3。ion ion-text-wrap類適用於Ionic 4。

在Ionic 3中，這只是一個名為text-wrap的屬性，但是我不確定是否僅限於某些組件。 嘗試更換：

<ion-label> Select Trip </ion-label>
<ion-select text-wrap [(ngModel)]="tripid" (ionCancel)="onCancel()" (ionChange)="onChange()">
  <ion-option text-wrap *ngFor="let subtrip of trips" [value]="subtrip.id">
    {{subtrip.startTime}} - {{subtrip.stopTime}}
  </ion-option>
</ion-select>

或者其中之一的組合。