css文字超出滚动效果

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>
<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>
<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%);
            }
        }
.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%);
            }
        }
.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%);
            }
        }