CSS:溢出:隐藏并翻译X屏蔽了句子的其余部分，只将字母移到左边的所有字母上

Question

我想让歌曲的专辑名称和标题出现在我目前正在构建的应用程序的某个地方，但当长度超过容器中的房间时，我很难让它自动滚动。我能描述预期结果的最好方法是让第一个字母消失，字符串的其余部分在向左移动时出现，就像你在汽车收音机里有一首歌的名字，但屏幕没有足够的空间显示整首歌一样。第一个图像是没有动画的情况下的样子。正如你所看到的，溢出是隐藏的，但标题的开头是正确的。

然后，如果我开始动画，它就是这样做的。溢出仍然是隐藏的，而不是隐藏标题的第一部分，它正在移动到"标题："；部分，这根本不是我想要的。

这是我的react组件/html/

<div className="track-info">
<div style={{textAlign: 'right', gridColumnStart: '1', gridRowStart: '1'}}>
Album: 
</div>
<div className="scrolling-album-container" >
<span className="scrolling-album">
{track.selectedTrack?.album.name}
</span>
</div>
<div style={{textAlign: 'right', gridColumnStart: '1', gridRowStart: '2'}}>
Title: 
</div>
<div className="scrolling-title-container" >
<span className="scrolling-title" >
{track.selectedTrack?.name}
</span>
</div>
</div>

这是我的CSS：

.track-info {
font-size: $font-size-xl;
place-self: center;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 20% 80%;
width: 400px;
height: auto;
column-gap: 1rem;
> * {
display: block;
width: 100%;
}    
}
.scrolling-album-container {
position: relative;
height: 100%;
width: 100%;
}
.scrolling-album {
position: absolute;
overflow: hidden;
height: 100%;
}
.scrolling-title-container {
position: relative;
height: 100%;
width: 250px;
}
.scrolling-title {
position: absolute;
overflow: hidden;
height: 100%;
max-width: 100%;
animation: scrollText 10s infinite linear;
}
@keyframes scrollText {
to {
transform: translateX(-66.6666%);
}
}

我知道我错过了一些东西，因为我在网上找到了一百万种方法，到目前为止，我一直在尝试复制它们，但没有成功。提前感谢！

编辑：所以我只是尝试在文本中添加一个

标签，并将动画应用于。滚动标题>p(滚动标题的所有子元素(，但其余部分仍然隐藏。

HTML:

<div className="scrolling-title-container" >
<span className="scrolling-title" >
<p>{track.selectedTrack?.name}</p>
</span>
</div>

CSS：

.scrolling-title-container {
position: relative;
overflow: hidden;
}
.scrolling-title {
position: absolute;
max-width: 100%;    
}
.scrolling-title > p {
animation: 10s linear infinite scrollText;
}

Answer 1

Yo应该将溢出移动到.scrolling-title-container。通过把它放在.scrolling-title中，你基本上是在移动盒子，什么都不说，这是多余的。但当父母的盒子溢出时：隐藏，你说孩子可以移动，但不能走出父母的盒子。

.scrolling-title-container {
position: relative;
height: 100%;
width: 250px;
overflow: hidden;
}
.scrolling-title {
position: absolute;
max-width: 100%;
}
.animation {
animation: scrollText 10s infinite linear;
}

<div className="scrolling-title-container" >
<div className="scrolling-title" >
<div className="animation">  {track.selectedTrack?.name} </div>
</div>
</div>