<div class="div2">
<p>111111111111111111111</p>
<p>211111111111111111111</p>
<p>311111111111111111111</p>
<p>411111111111111111111</p>
<p>511111111111111111111</p>
<p>611111111111111111111</p>
<p>711111111111111111111</p>
<p>2211111111111111111111</p>
<p>331111111111111111111</p>
<p>441111111111111111111</p>
<p>551111111111111111111</p>
<p>661111111111111111111</p>
<p>771111111111111111111</p>
<p>881111111111111111111</p>
<p>991111111111111111111</p>
<p>001111111111111111111</p>
</div>
</div> .div1 {
width:200px
height:200px
overflow:hidden
margin:auto
position:relative
}
@keyframes anis {
100% {
transform:translateY(-200px)
}
}img {
position:absolute
}
.div2 {
animation:anis 10s linear infinite
}
.div2:hover {
animation-play-state:paused
}
你好，您说的问题呢，一般有两种情况：1.在一个大的div里面，显示文章或新闻情况下，如果文字太多，需要自动换行和区域还要固定大小，一般这样处理：
在对应的div的css里面加入：
word-wrap:break-word /*** 自动换行 ***/
overflow:hidden /*** 自动隐藏超出部分 ***/
2.还有一种情况也比较常见就像在边栏的显示文章标题的情况或者是文章简介的区域，如果内容太长也会超出，影响用户体验，我们一般这样处理：
在对应的css里面加入：
text-overflow:ellipsis
white-space:nowrap
overflow:hidden
效果是：在ie下超出的部分会自动隐藏并且显示成省略号；在ff下不显示省略号，但也自动隐藏
不知道以上的方案对您有没有帮助，我们是UEDChina组的！希望对您有所帮助！:-)
