fix(material/snack-bar): handle long single-line content (#24135)

Fixes that long strings without spaces were breaking the layout of the snack bar.

Fixes #21681.

(cherry picked from commit 0bc45ca)

src/material/snack-bar/simple-snack-bar.html

@@ -1,4 +1,4 @@
-<span>{{data.message}}</span>
+<span class="mat-simple-snack-bar-content">{{data.message}}</span>
 <div class="mat-simple-snackbar-action"  *ngIf="hasAction">
   <button mat-button (click)="action()">{{data.action}}</button>
 </div>

src/material/snack-bar/simple-snack-bar.scss

@@ -30,3 +30,8 @@ $button-vertical-margin: -(math.div($button-height - $line-height, 2));
     margin-right: $button-horizontal-margin;
   }
 }
+
+.mat-simple-snack-bar-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}