title: How to make Angular Material Card Title one liner?
body: <p>I am unable to force <code>mat-card-title</code> to stay in one line and cut off the extra text.</p>
  
  <p>I have tried the css class below (text-oneline).</p>
  
  <pre><code>&lt;mat-card&gt;
    &lt;mat-card-header&gt;
      &lt;mat-card-title class="text-oneline"&gt;Heeeeeellllllloooo&lt;/mat-card-title&gt;
      &lt;mat-card-subtitle&gt;World!&lt;/mat-card-subtitle&gt;
    &lt;/mat-card-header&gt;
    &lt;img mat-card-image [src]="icon_url" alt="App Icon"&gt;
    &lt;mat-card-content&gt;
      &lt;p&gt;Some Text&lt;/p&gt;
    &lt;/mat-card-content&gt;
    &lt;mat-card-actions&gt;
      &lt;button mat-button&gt;Hello&lt;/button&gt;
    &lt;/mat-card-actions&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.text-oneline {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  </code></pre>
  
  <p>Right now, the text is longer than the card. I would like the text to stop and not overflow the card.
  I want the text to fill all available space but not go over the width of the mat-card.</p>
  
  <p>Example: <a href="https://angular-mat-card-example-4cb2wk.stackblitz.io" rel="noreferrer">https://angular-mat-card-example-4cb2wk.stackblitz.io</a></p>
  
  <p>Solution:</p>
  
  <p>The code by לבני מלכה works great, but only after window.resize is triggered. The simples solution I found was editing <code>mat-card-header</code>.</p>
  
  <pre class="lang-css prettyprint-override"><code>mat-card-header {
    display: flow-root;
  }
  </code></pre>