title: How to make marquee text only when it's overflowing?
body: <p>I have a text which is generated randomly to a div. And this text has different width depending on what is currently generated. And I want this text to marquee <strong>only when is too big.</strong> html:</p>
  
  <pre><code>&lt;div id="random_word"&gt; &lt;!--here appears something--&gt; &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#random_word {
      color: white;
      position: absolute;
      width: 50%;
      left: 0%;
      text-align: center;
      font-size: 8vw;
      margin-top: 22%;
      font-variant: small-caps
      text-shadow: 0 0 20px #000;
      text-align: center;
      z-index: 2;
      overflow: hidden;
      white-space: nowrap;
      line-height: 100%;
  }
  </code></pre>
  
  <p>I found already this css property in internet: <code>overflow-x:-webkit-marquee;</code>
  but I'm not sure how to use it. Can anyone help?</p>