From bca3c5bea0e264cac988f7ee108a74b6940cbecf Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 17 Oct 2017 19:55:10 +0200
Subject: [PATCH] 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.
---
 src/demo-app/select/select-demo.ts | 4 ++--
 src/lib/core/option/_option.scss   | 8 ++++++++
 src/lib/core/option/option.html    | 6 ++----
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/demo-app/select/select-demo.ts b/src/demo-app/select/select-demo.ts
index 5ed9b2cd70b4..fabb302d6dab 100644
--- a/src/demo-app/select/select-demo.ts
+++ b/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() {
diff --git a/src/lib/core/option/_option.scss b/src/lib/core/option/_option.scss
index c87b65e598d5..fdb4bf884ddf 100644
--- a/src/lib/core/option/_option.scss
+++ b/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 {
diff --git a/src/lib/core/option/option.html b/src/lib/core/option/option.html
index 7bf76128c4aa..c6316b889438 100644
--- a/src/lib/core/option/option.html
+++ b/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>