如何限制 css 字幕可以滚动的长度？

Question

这个选取框一直在其他元素上滚动，我不知道为什么。我尝试使用 max-width 来限制文本能够滚动的 space 数量，因为我只希望它在这个特定容器上滚动（在 lorem ipsum 顶部的红色边框内）。我更喜欢使用 css 字幕的解决方案，但如果使用 js 更容易，我也会接受这些答案。谢谢！

body {
    background:#222;
}

#sidebar_container {
    background:transparent;
    border:1px solid red;
    width:200px;
    height:auto;
    position:fixed;
    top:100px;
    left:220px;
}

.marquee {
    animation:marquee 5s linear infinite;
}

@keyframes marquee {
    0% {transform: translateX(100%);}
    100% {transform: translateX(-100%);}
}

#sidebar_title {
    font-family:Helvetica;
    font-weight:bold;
    text-transform:uppercase;
    text-align:center;
    color:#fff;
    font-size:20px;
    margin:0 0 10px 0;
}

#sidebar {
    border:1px solid red;
    background:transparent;
    font-family:arial;
    font-size:14px;
    width:200px;
    height:auto;
    text-align:center;

}

.desc_container {
    border:1px solid red;
    color:#fff;
    margin:10px 10px 10px 10px;
}


.desc {
}

<body>

    <div id="sidebar_container">
        <div id="sidebar_title"><div class="marquee">Marquee Text</div></div>
        <div id="sidebar">
            <div class="desc_container">
                <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            </div> <!-- desc container -->
        </div> <!-- sidebar -->
    </div> <!-- sidebar container -->

</body>

Answer 1

这是你想要的结果吗？添加了 overflow: hidden 到 #sidebar_title

body {
    background:#222;
}


#sidebar_container {
    background:transparent;
    border:1px solid red;
    width:200px;
    height:auto;
    position:fixed;
    top:100px;
    left:220px;
}


.marquee {
    animation:marquee 5s linear infinite;
}


@keyframes marquee {
    0% {transform: translateX(100%);}
    100% {transform: translateX(-100%);}
}


#sidebar_title {
    font-family:Helvetica;
    font-weight:bold;
    text-transform:uppercase;
    text-align:center;
    color:#fff;
    font-size:20px;
    margin:0 0 10px 0;
    overflow: hidden;
}


#sidebar {
    border:1px solid red;
    background:transparent;
    font-family:arial;
    font-size:14px;
    width:200px;
    height:auto;
    text-align:center;

}


.desc_container {
    border:1px solid red;
    color:#fff;
    margin:10px 10px 10px 10px;
}


.desc {
}

<body>

    <div id="sidebar_container">
        <div id="sidebar_title"><div class="marquee">Marquee Text</div></div>
<div id="sidebar">
<div class="desc_container">
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div> <!-- desc container -->
</div> <!-- sidebar -->
</div> <!-- sidebar container -->

</body>

如何限制 css 字幕可以滚动的长度？

How to limit the length a css marquee can scroll?

html

css

marquee