如何使选取框文本仅在溢出时才显示？

我有一个随机生成到 div 的文本。并且该文本具有不同的宽度，具体取决于当前生成的内容。我希望这段文字成为字幕仅当太大时。 html:

<div id="random_word"> <!--here appears something--> </div>

css:

#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%;
}

我已经在互联网上找到了这个CSS属性：overflow-x:-webkit-marquee;但我不知道如何使用它。有人可以帮忙吗？

确定元素是否溢出的最简单方法是比较其scroll其高度/宽度offset高度宽度。如果有任何一个scroll值大于它们的offset对，你的元素内容溢出了。

function isElementOverflowing(element) {
    var overflowX = element.offsetWidth < element.scrollWidth,
        overflowY = element.offsetHeight < element.scrollHeight;

    return (overflowX || overflowY);
}

从这里开始，这是一个简单的问题，检查该函数的返回值并添加选取框效果，如果true。要实现这一点，您可以将 div 的内容包装在<marquee>，或者使用前缀实现相同的视觉效果marqueeCSS 规则或通过 CSS 动画模拟它。

注意：虽然<marquee>标签在大多数浏览器中仍然按预期工作，它被认为已弃用，因此不适合未来。

• Here is 快速处理选框标签的包装 https://jsfiddle.net/ppajer/zeuzzguk/，尝试一下文本长度，看看它是如何工作的。 （或者，您可以将选取框的行为设置为左右交替：就是这样 https://jsfiddle.net/ppajer/zeuzzguk/1/ )
• here is CSS marquee 教程 http://www.hongkiat.com/blog/css-marquee/
• 这是关于用动画视觉模拟选取框的线程 https://stackoverflow.com/questions/21233033/css3-marquee-effect

祝你好运！