title: Conditional css - hover - overflow
body: <p>I want to keep the text hidden when it's too long and show it when hovering on it.</p>
  
  <p>The problem is that it also triggers when the text is not overflowing. How can I add as a condition <em>"If the text overflows then perform the translation, if the text doesn't overflow do not perform the translation"</em> ?</p>
  
  <p>I would prefer a <strong>css</strong> solution rather than a <strong>javascript</strong> solution if possible to avoid unnecessary complexity <em>(I need to use it every time I have text)</em>.</p>
  
  <p><strong>PS:</strong> the solution can be <strong>scss</strong> markup.</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>.case {
    cursor: pointer;
    display: flex;
    width: 10em;
    height: 3em;
    overflow: hidden;
    background-color: #444444;
    color: white;
    margin-top: 2em;
    margin-bottom: 2em;
    flex-direction: row;
    align-items: center;
  }
  
  .sp {
    width: 100%;
    height: auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
  }
  
  .case:hover .sp {
    transition: 1.3s;
    overflow: inherit;
    margin-left: -100%;
    width: auto;
    text-overflow: inherit;
    transition-timing-function: linear;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="case"&gt;
    &lt;span class="sp"&gt;Short text&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="case"&gt;
    &lt;span class="sp"&gt;Overflowing long text, so long that you can't read it at once!&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>