fix(select): option not truncated correctly in multiple mode

Currently, when the text of an option is truncated, it ends up removing everything except the ellipsis on Firefox, IE and Edge. These changes fix the truncation and simplify the option view.

Relates to #7211.

Author: crisbeto

src/demo-app/select/select-demo.ts

@@ -52,7 +52,7 @@ export class SelectDemo {
     {value: 'charizard-1', viewValue: 'Charizard'},
     {value: 'squirtle-2', viewValue: 'Squirtle'},
     {value: 'pikachu-3', viewValue: 'Pikachu'},
-    {value: 'eevee-4', viewValue: 'Eevee'},
+    {value: 'jigglypuff-4', viewValue: 'Jigglypuff with a really long name that will truncate'},
     {value: 'ditto-5', viewValue: 'Ditto'},
     {value: 'psyduck-6', viewValue: 'Psyduck'},
   ];
@@ -112,7 +112,7 @@ export class SelectDemo {
   }
 
   setPokemonValue() {
-    this.currentPokemon = ['eevee-4', 'psyduck-6'];
+    this.currentPokemon = ['jigglypuff-4', 'psyduck-6'];
   }
 
   reassignDrinkByCopy() {

src/lib/core/option/_option.scss

@@ -13,6 +13,11 @@
     position: relative;
     cursor: pointer;
     outline: none;
+    display: flex;
+    flex-direction: row;
+    max-width: 100%;
+    box-sizing: border-box;
+    align-items: center;
 
     &[aria-disabled='true'] {
       @include user-select(none);
@@ -35,6 +40,9 @@
   // </mat-option>
   .mat-option-text {
     display: inline-block;
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .mat-option-ripple {

src/lib/core/option/option.html

@@ -1,7 +1,5 @@
-<span *ngIf="multiple">
-  <mat-pseudo-checkbox class="mat-option-pseudo-checkbox"
-      [state]="selected ? 'checked' : ''" [disabled]="disabled"></mat-pseudo-checkbox>
-</span>
+<mat-pseudo-checkbox *ngIf="multiple" class="mat-option-pseudo-checkbox"
+    [state]="selected ? 'checked' : ''" [disabled]="disabled"></mat-pseudo-checkbox>
 
 <span class="mat-option-text"><ng-content></ng-content></span>