Question

我已成为新闻标题div。消息从左到右顺利流动。唯一的问题是我的新闻文本是块类型。每个单词都叠在一起。如何解决这个问题？

＆＃13;

#news_space {
  overflow:hidden;
  width:400px;
  border:1px solid black;
  height:30px;
}

#news_headlines {
  padding-left:100%;
  animation-name:newsroll;
  animation-duration:10s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;

 }

@keyframes newsroll {
  from{transform:translate(0,0)}
  to{transform:translate(-100%,0)}
}

＆＃13;

<div id="news_space">
  <div id="news_headlines">
    <p>Big sales today!</p> <p>Big sales today!</p>
  </div>
</div>

＆＃13;

Answer 1

删除padding-left，将display: inline-block;和一些width添加到<p>代码，然后更改动画from{transform:translate(100%,0)}。

请记住，<p>必须适合父元素，否则第二个<div>将跳转到下一行。

#news_space {
  overflow:hidden;
  width:400px;
  border:1px solid black;
  height:30px;
}

#news_headlines {
  animation-name:newsroll;
  animation-duration:10s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

#news_headlines p {
  margin: 6px;
  width: 150px;
  display: inline-block;
}

@keyframes newsroll {
  from{transform:translate(100%,0)}
  to{transform:translate(-100%,0)}
}

<div id="news_space">
  <div id="news_headlines">
    <p>Big sales today!</p>
    <p>Big sales today!</p>
  </div>
</div>

新闻标题不能正确滚动

1 个答案: