如何在字幕溢出时制作字幕文本？

Question

我有一个随机生成的文本到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; 但我不知道如何使用它.有人可以帮忙吗？

Answer 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>,或使用前缀marqueeCSS规则实现相同的视觉效果或通过CSS动画进行模拟.

注意:虽然<marquee>标签在大多数浏览器中仍然按预期工作,但它被认为已被弃用,因此不具备未来性.

• 这是一个快速的小提琴包装在一个字幕标签,玩文本长度,看看它是如何工作的.(或者,你可以设置选框的行为从一边到另一边交替:这是怎么回事)
• 这是CSS选框的教程
• 这是一个在视觉上模拟带动画的选框的线程

祝好运!