title: CSS Transition not working with white-space: nowrap and text-overflow: ellipsis when hover
body: <p>I have set a <code>white-space: nowrap</code> with <code>text-overflow: ellipsis</code> in some text and, when the user hovers, it should change the white-space value to normal. The hover code works fine, but I cant make the transitions work.</p>
  
  <p>This is the CodePen link: <a href="https://codepen.io/anon/pen/qwYoyR" rel="nofollow noreferrer">https://codepen.io/anon/pen/qwYoyR</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.App p {
    margin-bottom: 3px;
  }
  .App .bg-row {
    box-shadow: 0px 0px 5px #bdc3c7;
    background-color: #ecf0f1a3;
    padding: 20px;
    border-radius: 5px;
  }
  .App .bg-row .repositorios {
    transition: all 0.2s ease;
    margin-bottom: 20px;
  }
  .App .bg-row .repositorios:hover .repo-content {
    background-color: #d2d6d8;
    transition: 500ms ease-in-out;
  }
  .App .bg-row .repositorios .repo-image {
    width: 100%;
    height: auto;
    box-shadow: 0px 0px 5px #bdc3c7;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
  }
  .App .bg-row .repositorios .repo-content {
    padding: 10px;
    transition: 500ms ease-in-out;
    overflow: hidden;
    box-shadow: 0px 0px 5px #bdc3c7;
    transition: 500ms ease-in-out;
    background-color: #ecf0f1;
  }
  .App .bg-row .repositorios .repo-content p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .App .bg-row .repositorios .repo-content .read-more {
    transition: 500ms ease-in-out;
    cursor: pointer;
  }
  .App .bg-row .repositorios .repo-content .read-more:hover {
    white-space: normal;
    transition: 500ms ease-in-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="container App"&gt;
    &lt;div class="row bg-row"&gt;
      &lt;div class="col-sm-6 col-md-4 col-lg-3 repositorios"&gt;
        &lt;div class="repo-content"&gt;
          &lt;p class="read-more"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>