如何仅在溢出时制作选取框文本？答案

【问题标题】：How to make marquee text only when it's overflowing?如何仅在溢出时制作选取框文本？
【发布时间】：2017-02-01 18:48:27
【问题描述】：

我有一个随机生成到 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; 但我不确定如何使用它。有人可以帮忙吗？

【问题讨论】：

也许CSS3 Marquee Effect 结合Check with jquery if div has overflowing elements？

标签： html css marquee

【解决方案1】：

确定元素是否溢出的最简单方法是将其scroll 高度/宽度与其offset 高度/宽度进行比较。如果任何scroll 值大于它们的offset 对，则您的元素内容溢出。

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

    return (overflowX || overflowY);
}

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

注意：虽然<marquee> 标记在大多数浏览器中仍然可以正常工作，但它被认为已被弃用，因此不能保证未来的发展。

这里是a quick fiddle on wrapping in a marquee tag，玩弄文本长度，看看它是如何工作的。（或者，您可以将选取框的行为设置为左右交替：here's how）
这里是a tutorial on CSS marquee
这里是a thread on visually simulating a marquee with animations

祝你好运！

【讨论】：

天哪，谢谢。但我还有一个问题。如何使这个 (jsfiddle.net/ppajer/zeuzzguk) 字幕的行为交替出现。我的意思是我希望它从右向左反弹，然后再向右反弹，依此类推。
@kupkol 你可以通过behavior 属性控制它。 <marquee behavior="alternate"> 会实现弹跳效果。
哦抱歉，是通过JS注入的。那将是marquee.behavior = "alternate";，updated the fiddle
嘿，我现在遇到这个问题，你能告诉我如何让它垂直吗？

【解决方案2】：

当溢出被隐藏时，我认为接受的答案不起作用。

最好在里面添加另一个 div 并检查它们的宽度 Check with jquery if div has overflowing elements

【讨论】：