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 변경/노래를 일시 정지) 위성을 잘못 쓰고 게으름을 너무 게으른 쓴다는 건 알고 있습니다.

Answer 1

너비가 전체 텍스트에 비해 너무 낮 으면 텍스트를 자르므로 줄 바꿈을 방지해야합니다. 당신이 paragraph을 사용하고 있기 때문에 단지 스타일에 display:inline를 추가하고 그 문제를 해결하는 것입니다 : 당신은 작은 폭에서 그것을 방지하기 위해 아무것도하지 않았기 때문에,

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