fix(snack-bar): allow multi-line text

* Wraps multi-line text, instead of truncating it, inside of snack bars. **Note:** While the spec only mentions multi-line text on mobile, this seems to be a better approach than cutting it off at ~500px. We can revisit this if we start using media queries.
* Aligns the snack bar button margin to the spec.
* Simplifies some of the CSS to remove the need for a hardcoded height and negative margins.

Fixes angular#1951.

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

@@ -1,2 +1,2 @@
-<span class="mat-simple-snackbar-message">{{message}}</span>
+{{message}}
 <button class="mat-simple-snackbar-action" *ngIf="hasAction" (click)="dismiss()">{{action}}</button>

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

@@ -2,6 +2,8 @@
 @import '../core/style/button-common';
 @import '../core/style/list-common';
 
+$mat-snack-bar-button-margin: 48px !default;
+
 :host {
   display: flex;
   justify-content: space-between;
@@ -13,20 +15,15 @@
   }
 }
 
-.mat-simple-snackbar-message {
-  @include mat-truncate-line;
-}
-
 .mat-simple-snackbar-action {
   @include mat-button-reset;
 
   background: none;
-  margin: -5px 0 0;
-  padding: 5px;
   text-transform: uppercase;
   color: inherit;
-  line-height: inherit;
+  line-height: 1;
   flex-shrink: 0;
+  margin-left: $mat-snack-bar-button-margin;
   font: {
     family: inherit;
     size: inherit;

src/lib/snack-bar/snack-bar-container.scss

@@ -2,7 +2,6 @@
 @import '../core/a11y/a11y';
 
 $mat-snack-bar-padding: 14px 24px !default;
-$mat-snack-bar-height: 20px !default;
 $mat-snack-bar-min-width: 288px !default;
 $mat-snack-bar-max-width: 568px !default;
 
@@ -13,10 +12,8 @@ $mat-snack-bar-max-width: 568px !default;
   border-radius: 2px;
   box-sizing: content-box;
   display: block;
-  height: $mat-snack-bar-height;
   max-width: $mat-snack-bar-max-width;
   min-width: $mat-snack-bar-min-width;
-  overflow: hidden;
   padding: $mat-snack-bar-padding;
   // Initial transformation is applied to start snack bar out of view.
   transform: translateY(100%);