Le texte Marquee est coupé

Question

Je dois utiliser un marqueur avec une longue chaîne de texte. J'ai travaillé ce code de plusieurs façons différentes mais au final, le texte est toujours coupé après quelques mots (ou la première ligne). J'ai besoin que l'intégralité du texte continue à défiler. Si nous pouvions le garder dans le CSS, ce serait l'idéal. Merci.

Vous pouvez le voir ici : http://braidsmusic.com/test

.scroll-left {
  height: 100px;
  overflow: hidden;
  position: relative;
}

.scroll-left h1 {
  position: absolute;
  width: 150%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  /* Starting position */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  /* Apply animation to this element */
  -moz-animation: scroll-left 10s linear infinite;
  -webkit-animation: scroll-left 10s linear infinite;
  animation: scroll-left 10s linear infinite;
}

/* Move it (define the animation) */

@-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%);
    /* Browser bug fix */
    -webkit-transform: translateX(100%);
    /* Browser bug fix */
    transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
    /* Browser bug fix */
    -webkit-transform: translateX(-100%);
    /* Browser bug fix */
    transform: translateX(-100%);
  }
}

<div class="scroll-left">
  <h1 style="color: #ccc; line-height:90px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
</div>

Answer 1

• largeur de scroll-left remplissage automatique avec la largeur du texte. Utilisez donc fit-content ;

• changement de la position de départ à 30%.

  body{ overflow-x:hidden; }

  .scroll-left { height:auto; width:fit-content; }

  .scroll-left h1 { height:auto; margin: 0; / Starting position / -moz-transform: translateX(30%); -webkit-transform: translateX(30%); transform: translateX(30%); / Apply animation to this element / -moz-animation: scroll-left 30s linear infinite; -webkit-animation: scroll-left 30s linear infinite; animation: scroll-left 30s linear infinite; }

  / Move it (define the animation) /

  @-moz-keyframes scroll-left { 0% { -moz-transform: translateX(30%); } 100% { -moz-transform: translateX(-100%); } }

  @-webkit-keyframes scroll-left { 0% { -webkit-transform: translateX(30%); } 100% { -webkit-transform: translateX(-100%); } }

  @keyframes scroll-left { 0% { -moz-transform: translateX(30%); / Browser bug fix / -webkit-transform: translateX(30%); / Browser bug fix / transform: translateX(30%); } 100% { -moz-transform: translateX(-100%); / Browser bug fix / -webkit-transform: translateX(-100%); / Browser bug fix / transform: translateX(-100%); } }

  <div class="scroll-left"> <h1 style="color: #ccc; white-space:nowrap;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

  et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

  culpa qui officia deserunt mollit anim id est laborum.</h1> </div>