如何使跑马灯文字仅在溢出时显示？

Question

如何使跑马灯文字仅在溢出时显示？

8

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

- kupkol

3

或许可以将CSS3滚动效果与使用jQuery检查div是否存在溢出元素结合起来使用？ - insertusernamehere

2个回答

0

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

最好在内部添加另一个div并检查它们的宽度使用jquery检查div是否具有溢出元素

- alex toader

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ppajer · Accepted Answer

判断元素是否溢出的最简单方法是将其 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>标签在大多数浏览器中仍然按预期工作，但它被认为是不推荐使用的，因此不具有未来性。

以下是一些相关链接： - 在此处可以快速尝试使用<marquee>标签，可以尝试改变文本长度以查看其效果。（或者，您还可以将跑马灯的行为设置为从左右两侧交替显示，方法请参见此处） - 这是一个关于CSS跑马灯的教程 - 还有一个帖子介绍如何通过动画来视觉模拟跑马灯效果。

祝您好运！