用css keyfranes动画更换选框

Question

我想创建一个“玩家喜欢”栏，显示正在播放的文字作为选框。目前我有这个：

<div class="bar">
    <div id="pp" onClick="pl()"><img src="play-256.png"></div>
    <div id="np" class="marquee"><p>Playlist Empty</p></div>
</div>

css看起来像这样：

.bar {
    height: 50px;
    width: 800px;
    border-radius: 25px;
    background-color: brown;
    margin-top: 20%;
}
.marquee {
    width: 90%;
    float: left;
    overflow: hidden;
}
.marquee p {
    height: 100%;
    width: 100%;
    margin: 0;
    line-height: 50px;
    animation: mrq 15s linear infinite;
}
@keyframes mrq {
    0%  {transform:translateX(100%);}
    100%{transform:translateX(-100%);}
}

@media only screen and (max-width: 700px) {
.bar {
    width: 90%;
}
.marquee {
    width: 75%;
}
.marquee p {
    animation: mrq 5s linear infinite;
}
}

问题出现在响应中：

正如您所看到的，在响应中，文本因任何原因而被隐藏。我做错了什么？

（onClick =“pl（）”更改了“np”div中的文字并播放/暂停了该歌曲。

P.S。我知道我写的卫星不对，懒得重做GIF。

Answer 1

您可能需要阻止换行，因为如果整个文本的宽度太低，它会关闭文本。由于您使用的是paragraph，只需在样式中添加display:inline即可解决问题：

.marquee p {
    animation: mrq 5s linear infinite;
    display: inline;
}