动画字幕在移动设备上的CSS中断

Question

我目前在网站上有一个用于发布新产品发布，新闻等的字幕。我的问题是，当网站调整移动设备的大小时，它在文本中引入了换行符，然后动画在顶部加载了多行文本彼此的。有一个简单的解决方法吗？

.marquee {
  width:            99%;
  height:            50px;
  margin:            25px auto;
  overflow:         hidden;
  position:         relative;

  border:           1px solid #000;
  border-radius:    5px;
  background-color: #6699CC;
  box-shadow:       inset 0px 2px 2px rgba(0, 0, 0, .5),
    0px 1px 0px rgba(250, 250, 250, .2);

  counter-reset:    marqueeindex;
}

/* paragraphs with news */
.marquee p {
  position:         absolute;
  width:            100%;
  height:           100%;
  margin:           0;
  color:            #fff;
  text-align:       center;
  font-family:      Tahoma, Arial, sans-serif;
  text-shadow:      1px 1px 0px #000000;
  filter:           dropshadow(color=#000000, offx=1, offy=1);

  line-height:      50px;       /* height of container */
  transform: translateY(-100%); /* start above container */
}
/* use same animation for each paragraph */
.marquee p {
  animation: shownews 20s ease infinite;
}

/* ascending animation delay after first news item */
.marquee p:nth-child(2) { animation-delay:  4s; }
.marquee p:nth-child(3) { animation-delay:  8s; }
.marquee p:nth-child(4) { animation-delay: 12s; }
.marquee p:nth-child(5) { animation-delay: 16s; }

/* pause animation on hover */
.marquee:hover p {
  animation-play-state: paused;
}

/* animation for displaying one element */
@keyframes shownews {
  0%  {
    transform:translateY(-100%);
  }
  5% {
    transform:translateY(0);
  }
  15% {
    transform:translateY(0);
  }
  20% {
    transform:translateY(100%);
  }
  100%{
    transform:translateY(100%);
  }
}