title: How to display multiple selected values in ion select?
body: <p>I am using developing an PWA with Ionic 4. while using ion-select for selecting multiple values like this.</p>
  
  <pre><code>&lt;div class="form-group"&gt;
  
    &lt;ion-item&gt;
      &lt;ion-icon slot="start" name="briefcase"&gt;&lt;/ion-icon&gt;
      &lt;ion-label floating color="primary"&gt;Business Unit *&lt;/ion-label&gt;
      &lt;ion-select multiple="true" placeholder="Select Business" (ionChange)="onBuSelectChange($event)"
        formControlName="businessUnit" class="form-control"
        [ngClass]="{'is-valid' : submitted &amp;&amp; f.businessUnit.errors}"&gt;
        &lt;ion-select-option *ngFor="let unit of listBusinessUnit" [value]="unit.ID"&gt;
          {{unit.BusinessUnitDesc}}
        &lt;/ion-select-option&gt;
      &lt;/ion-select&gt;
      &lt;h1 *ngIf="submitted &amp;&amp; f.businessUnit.errors &amp;&amp; f.businessUnit.errors.required" floating&gt;*&lt;/h1&gt;
    &lt;/ion-item&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I am getting following output where user is only able to see text of first selected value of ion-options. </p>
  
  <p><a href="https://i.stack.imgur.com/7roSA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7roSA.png" alt="enter image description here"></a></p>
  
  <p>I tried overriding css with the following with no success. </p>
  
  <pre><code>.select-text {
      -ms-flex: 1;
      flex: 1;
      min-width: 190px;
      font-size: inherit;
      text-overflow: ellipsis;
      white-space: pre-line;
      overflow: hidden;
    }
  </code></pre>