How to display more characters in CSS Scrolling Text?-CodePudding

I am following this website to add some right to left scrolling text. I'm having an issue where there seems to be a limit on how many characters I have in before it cuts them. If I zoom out of the page, it works better but if I go on mobile, it cuts even more. I have tried setting 'overflow: visible' but it did not work.

How do I extend the word limit?

The following sample code is provided (with the longer message I added in):

.scroll-left {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: yellow;
  color: orange;
  border: 1px solid orange;
}

.scroll-left p {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  transform: translateX(100%);
  animation: scroll-left 15s linear infinite;
}

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

<div >
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>

CodePudding user response：

.scroll-left {
  height: 50px;
  position: relative;
  background: yellow;
  color: orange;
  border: 1px solid orange;
}

.scroll-left p {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  transform: translateX(100%);
  animation: scroll-left 7s linear infinite;
}

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

<div >
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>

When you remove the overflow: hidden from .scroll-left you can see that in your original animation you're simply only displaying the first line of the paragraph.

To fix that, add white-space: nowrap; to .scroll-left p

.scroll-left {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: yellow;
  color: orange;
  border: 1px solid orange;
}

.scroll-left p {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  transform: translateX(100%);
  animation: scroll-left 15s linear infinite;
  white-space: nowrap;
}

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

<div >
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>

CodePudding user response：

Set width on .scroll-left p to a large value like 9999rem and you should be able to see all the text scroll by. If you have a fixed amount of text to display, you can adjust the width value so it scrolls without a bunch of dead space, but you should make it larger than needed to account for different font sizes and rendering on different devices.

.scroll-left p {
  position: absolute;
  width: 9999rem;
  height: 100%;
  ...
}