css文字不超出不滚动，字超超出盒子后显示走马灯成效

<div class="marquee"> <div class="marquee-wrap"> <div class="marquee-content "> 这个是出滚云服务器成本高吗知乎文章非超长数据 </div> </div> </div> <div class="marquee"> <div class="marquee-wrap"> <div class="marquee-content "> 这个是超长数据，我超长了哦，动成云服务器成本高吗知乎文章我超长了哦，字超我超长了哦 </div> </div> </div> .marquee { overflow: hidden; } .marquee .marquee-wrap { width: 100%; animation: marquee-wrap 4s infinite linear; } .marquee .marquee-content { float: left; white-space: nowrap; min-width: 100%; animation: marquee-content 4s infinite linear; } @keyframes marquee-wrap { 0%,出滚 30% { transform: translateX(0); } 70%, 100% { transform: translateX(100%); } } @keyframes marquee-content { 0%, 30% { transform: translateX(0); } 70%, 100% { transform: translateX(-100%); } } 内容看完了