title: CSS NoWrap on Text
body: <p>I have a card with a bunch of text inside of it. Some of this is lengthy and it is forced onto the next line like this,</p>
  
  <p><a href="https://i.stack.imgur.com/T92cf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/T92cf.png" alt="enter image description here"></a></p>
  
  <p>I'd like for the text to remain on one line, and become an ellipsis if necessary for a tooltip. So like 'Declined to ans...' etc</p>
  
  <p>I've used flex and angular-material to set this up currently. </p>
  
  <p>Things I have tried:</p>
  
  <p>Setting the following css properties:</p>
  
  <pre><code>text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  </code></pre>
  
  <p>This will make the text no longer overflow, but the ellipsis isn't applied. </p>
  
  <p>Here is the HTML</p>
  
  <pre><code>&lt;div *ngIf="profile" fxLayout="row" style="justify-content: space-evenly;"&gt;
  ......
   &lt;div fxLayout="column" style="flex-basis: 75%; margin-right: 10px;"&gt;
          &lt;mat-card class="card-info" style="flex: 1.5;"&gt;
              &lt;div class="mat-card-header-text"&gt;Personal Information&lt;/div&gt;
              &lt;mat-card-content class="flex-and-justify-between"&gt;
                  &lt;div fxLayout="column" style="padding: 5px;"&gt;
                      &lt;label class="info-heading"&gt;Date of Birth&lt;/label&gt;
                      &lt;label&gt;{{profile.dateOfBirth | date }}&lt;/label&gt;
                      &lt;label class="info-heading info-heading-padded"&gt;Sexuality&lt;/label&gt;
                      &lt;label&gt;{{profile.sexuality.value}}&lt;/label&gt;
                      &lt;label class="info-heading info-heading-padded"&gt;Previous Offender&lt;/label&gt;
                      &lt;label&gt;{{profile.previousOffender}}&lt;/label&gt;
                  &lt;/div&gt;
  
                  &lt;div fxLayout="column"&gt;
                      &lt;label class="info-heading"&gt;Gender&lt;/label&gt;
                      &lt;label&gt;{{profile.gender}}&lt;/label&gt;
                      &lt;label class="info-heading info-heading-padded"&gt;Gender Identity&lt;/label&gt;
                      &lt;label&gt;{{profile.genderIdentity.value}}&lt;/label&gt;
                      &lt;label class="info-heading info-heading-padded"&gt;Date of First Visit&lt;/label&gt;
                      &lt;label&gt;22/01/2018&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div fxLayout="column"&gt;
                      &lt;label class="info-heading"&gt;Postcode&lt;/label&gt;
                      &lt;label&gt;{{profile.postcode}}&lt;/label&gt;
                      &lt;label class="info-heading info-heading-padded"&gt;Location&lt;/label&gt;
                      &lt;label&gt;{{profile.location.value}}&lt;/label&gt;
                      &lt;label class="info-heading info-heading-padded"&gt;Employment Status&lt;/label&gt;
                      &lt;label&gt;{{profile.employmentStatus.value}}&lt;/label&gt;
                  &lt;/div&gt;
  
                  &lt;div fxLayout="column"&gt;
                      &lt;label class="info-heading"&gt;Ethnicity&lt;/label&gt;
                      &lt;label&gt;{{profile.ethnicity.value}}&lt;/label&gt;
                      &lt;label class="info-heading info-heading-padded"&gt;Sex Worker&lt;/label&gt;
                      &lt;label&gt;{{profile.sexWorker}}&lt;/label&gt;
                  &lt;/div&gt;
  
              &lt;/mat-card-content&gt;
          &lt;/mat-card&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>.card {
      padding: 0;
      width: 225px;
      margin: 15px 15px 0 15px;
  }
  
  .card-initials {
      display: flex;
      flex-wrap: nowrap;
      background-color: #D3DCE5;
      border-bottom: #afbfd0 1px solid;
  }
  
  .card-initials span {
      text-align: center;
      width: inherit;
      line-height: 225px;
      font-size: 72px;
  }
  
  .card-info {
      margin-top: 15px;
  }
  
  .mat-card-header-text {
      margin: 0;
      margin-bottom: 10px;
      font-weight: bold;
  }
  
  .info-heading {
      color: #728ba7;
  }
  
  .info-heading-padded {
      padding-top: 13px;
  }
  
  .mat-card-header-text a {
      float: right;
      font-weight: normal;
      font-size: 12px;
      text-decoration: none;
      color: #58708d;
  }
  
  .tooltip {
      fill: #333333;
  }
  </code></pre>