用css keyfranes动画替换字幕

Question

我想制作一个“player like”栏，它可以显示正在播放的文字，就像选取框一样。目前，我有这样的：

<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; 
} 
} 

问题apears：

正如你可以看到，在响应文本获得嗨无论出于何种原因，dden。我究竟做错了什么？

（所述的onClick = “PL（）” 改变文本insited的 “NP” DIV和戏剧/暂停歌曲）

P.S.我知道我写错了卫星，懒得重做GIF。

Answer 1

您可能需要防止换行，因为如果宽度对整个文本来说太低，则会将文本切断。由于您使用的是paragraph只需添加display:inline的风格，这将解决这个问题：

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