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

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.

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

@@ -60,7 +60,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'},
   ];
@@ -120,7 +120,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>