Javascript 如何在ionic应用程序中显示隐藏部分文本？

我正在构建一个ionic 3应用程序，有一个问题我无法显示完整的文本，其中一部分由于文本内容较长而自动隐藏

然后

如何在ionic应用程序中显示文本的隐藏部分？正如您在上面捕获的屏幕中所看到的，部分时间文本隐藏为。。。 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>

选择行程
{{subtrip.startTime}-{{subtrip.stopTime}

您可以使用调整文本，以便通过在

离子选项上设置一个类来在下次显示文本-

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

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

在您的global.css中添加

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

您尚未澄清，但这看起来像是爱奥尼亚4代码

控制这一点的正确方法是使用内置的
ion text wrap
类：


我认为这需要使用
离子选项
：

<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>

更新
您现在已经指定了Ionic 3。
iontext 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>

选择行程
{{subtrip.startTime}-{{subtrip.stopTime}

或者它们中的一个组合。
在ionic 3中，您需要覆盖css，这似乎很好：

.alert ios.alert收音机标签{
空白：未设置！重要；
}
.警报md.警报无线电标签{
空白：未设置！重要；
}
.警报wp.警报无线电标签{
空白：未设置！重要；
}

演示：
使用css选择字段并使其更宽。或者将两个日期时间分成两行。谢谢，我尝试在ion选项和ion选择中添加ion文本换行，但不起作用。我用了离子3。似乎它不适用于ion select，选项No
ion text wrap
适用于ionic4。在ionic 3中，这只是一个名为
text wrap
的属性，但我不确定它是否仅限于某些组件。好吧，我不知道，我没有使用ionic 3，所以我不知道它的详细信息。很幸运，你检查了DOM以查看是否应用了css属性？
<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>