title: Marquee text on hover only when overflow
body: <p>I want to marquee a text on hover if it doesn't fit in to its parent component else it should not hover.</p>
  
  <p>I 'm able to marquee or scroll the text when user hovers on it, but i want to put condition of overflow. </p>
  
  <p>This is my sample code : </p>
  
  <pre><code>&lt;div class="labelContainer"&gt;
    &lt;span&gt;The long text should scroll when user hovers on it.&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="labelContainer"&gt;
    &lt;span&gt;Should Not Scroll&lt;/span&gt;
  &lt;/div&gt;
  
  .labelContainer {
    height: 30px;
    border: 1px solid #000;
    border-radius: 3px;
    border-radius: 3px;
    display: flex;
    width: 200px;
    overflow: hidden;
    position: relative;
    padding : 5px;
  }
  
  .labelContainer span {
    height: 30px;
    width: 200px;
    color: #000;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    transform: translateX(0);
    transition: 1s;
  }
  
  .labelContainer:hover span {
    width: auto;
    transform: translateX(calc(200px - 100%));
  }
  
  </code></pre>
  
  <p>I have also uploaded it on fiddle : <a href="https://jsfiddle.net/ydt46n1u/4/" rel="nofollow noreferrer">https://jsfiddle.net/ydt46n1u/4/</a></p>
  
  <p>In the above example how can i stop marquee for second div?</p>