如何显示离子选择按钮选项的全文？

Question

我在页面中添加了一个离子选择按钮。该选项将显示一个长字符串，我希望它可以显示全文字符串，但是该字符串将被点-点-点截断，如下所示：

我的代码如下：

<ion-item *ngIf="select == 'trip'">
    <ion-label> Select Trip </ion-label>
    <ion-select text-wrap>
      <ion-option *ngFor="let subtrip of trips" value = {{subtrip.tripid}}> {{subtrip.startTime}} - {{subtrip.stopTime}} </ion-option>
    </ion-select>
  </ion-item>

我尝试在html中添加文本换行符，但是它不起作用...您能帮忙吗？

Answer 1

<ion-list radio-group [(ngModel)]="radioGroup">
<ion-item>
  <ion-label text-wrap>RadioButtonText</ion-label>
  <ion-radio checked="false" value="value"></ion-radio>
</ion-item>

这应该适合您

Answer 2

因此，如果这是您的模板（html）：

<ion-content>
    <ion-item>
        <ion-label>Toppings</ion-label>
        <ion-select [(ngModel)]="toppings" multiple="true">
            <ion-option>BaconBaconBaconBaconBaconBaconBaconBaconBacon</ion-option>
            <ion-option>Black OlivesBaconBaconBaconBaconBaconBaconBacon</ion-option>
            <ion-option>Extra CheeseBaconBaconBaconBaconBaconBaconBacon</ion-option>
        </ion-select>
    </ion-item>
</ion-content>

并且您要确保没有自动换行的行为，因此不能对离子组件应用文本自动换行，并希望它会立即支持这种行为。

通常，您要转到Chrome开发者工具>元素，并查看继承了哪些CSS规则并将其应用于您的组件（在这种情况下，请通过离子选择）：

现在，根据您使用的是哪种平台样式（ios或md），您需要对此类进行更改（在使用ios的情况下）：

page-tutorials {
    .no-scroll .scroll-content {
        overflow: hidden;
    }
}
.alert-ios .alert-md .alert-checkbox-label {
    white-space: normal !important;
}

请注意，您需要在页面组件的CSS（如上所述）之外添加此类覆盖，以使其正常工作。

Answer 3

对于Ionic 4，ion-select中的每个选项都必须包装在ion-select-option中。试用interface="action-sheet"将显示选项的全文。 default界面是alert。

<ion-item>
 <ion-label>Food</ion-label>
  <ion-select interface="action-sheet" [(ngModel)]="food">
   <ion-select-option [value]="Burger">BurgerBurgerBurgerBurgerBurgerBurgerBurger</ion-select-option>
   <ion-select-option [value]="Sandwich">SandwichSandwichSandwichSandwichSandwichSandwich</ion-select-option>
   <ion-select-option [value]="Salad">SaladSaladSaladSaladSaladSaladSalad</ion-select-option>
  </ion-select>
</ion-item>

默认alert界面
action-sheet界面