fix(slide-toggle): truncate label content with ellipsis (#9166)

* Instead of showing the text overflow of slide-toggle content, an ellipsis for too long labels will be shown.

Fixes #5212

src/lib/slide-toggle/slide-toggle.scss

@@ -2,6 +2,7 @@
 @import '../core/ripple/ripple';
 @import '../core/style/elevation';
 @import '../core/style/vendor-prefixes';
+@import '../core/style/list-common';
 @import '../../cdk/a11y/a11y';
 
 $mat-slide-toggle-thumb-size: 20px !default;
@@ -17,6 +18,7 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
 .mat-slide-toggle {
   display: inline-block;
   height: $mat-slide-toggle-height;
+  max-width: 100%;
 
   line-height: $mat-slide-toggle-height;
 
@@ -53,6 +55,10 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
   cursor: pointer;
 }
 
+.mat-slide-toggle-content {
+  @include mat-truncate-line();
+}
+
 /* If the label should be placed before the thumb then we just change the orders. */
 .mat-slide-toggle-label-before {
   .mat-slide-toggle-label { order: 1; }
@@ -131,6 +137,10 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
   width: $mat-slide-toggle-bar-width;
   height: $mat-slide-toggle-bar-height;
 
+  // Prevent shrinking of the bar container. It can happen that the content is long enough to
+  // shrink the bar and the thumb.
+  flex-shrink: 0;
+
   border-radius: $mat-slide-toggle-bar-border-radius;
 
   @include cdk-high-contrast {