Невозможно прокрутить весь текст с помощью анимации в css

Question

Я пытаюсь прокрутить весь текст, но это не прокрутка. это прокрутка на некотором контенте. ниже мой код.

.marquee {
            height: 50px;
            overflow: hidden;
            position: relative;
            background: #fefefe;
            color: #333;
            border: 1px solid #4a4a4a;
        }
        
.marquee p {
    display: inline;
    margin: 0;
    line-height: 50px;
    text-align: center;   
     width: 100%;
}

.marquee__content{
    
            -moz-animation: scroll-left 2s linear infinite;
            -webkit-animation: scroll-left 2s linear infinite;
            animation: scroll-left 20s linear infinite;
}
        
        @-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }

<div class="marquee">
    <div class="marquee__content">
  <p>1 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
        <p>2 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
        <p>3 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  </div>
    </div>

Я пытался прокрутить несколько параграфов, но не смог прокрутить весь текст. это не прокрутка всех пунктов. Не могли бы вы помочь мне решить эту проблему.

Answer 1

Добавить в white-space:nowrap в marquee__content

.marquee__content {
    -moz-animation: scroll-left 2s linear infinite;
    -webkit-animation: scroll-left 2s linear infinite;
    animation: scroll-left 20s linear infinite;
    white-space: nowrap;
}

.marquee {
            height: 50px;
            overflow: hidden;
            position: relative;
            background: #fefefe;
            color: #333;
            border: 1px solid #4a4a4a;
            
        }
        
.marquee p {
    display: inline;
    margin: 0;
    line-height: 50px;
    text-align: center;   
     width: 100%;
}

.marquee__content{
    
            -moz-animation: scroll-left 2s linear infinite;
            -webkit-animation: scroll-left 2s linear infinite;
            animation: scroll-left 20s linear infinite;
            white-space: nowrap;
}
        
        @-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-200%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-200%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-200%);
                -webkit-transform: translateX(-200%);
                transform: translateX(-200%);
            }
        }

<div class="marquee">
    <div class="marquee__content">
  <p>1 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
        <p>2 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
        <p>3 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
  </div>
    </div>