CSSキーフライングアニメーションによるマーキー置換

Question

マーキーのように現在再生中のテキストを表示する「プレーヤーのような」バーを作りたいと思います。あなたのよう

：

.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：

<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は次のようになります。現時点では私は、これは持っています見ることができる、応答するテキストがハイになるどんな理由であれデデン。私は間違って何をしていますか？

P.S.（のonClick = "PLは（）" テキスト "NP" div要素と遊びをinsited変更/曲を一時停止します）私はgifをやり直すにはあまりにも怠惰な、間違った衛星を書いたことを知っている。

Answer 1

テキスト全体に対して幅が小さすぎる場合、テキストを切り捨てるので、改行を防ぐ必要があります。あなたがparagraphを使用しているので、単にスタイルにdisplay:inlineを追加し、それが問題解決でしょう：あなたはこのような小さな幅でそれを防ぐために何もしなかったので、

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