remove white gap from marquee

Question

There is a white gap on a marquee.

I put a long sentence (Breaking news Breaking news Breaking news Breaking news Breaking news Breaking news Breaking news) but it keeps on going then the B touches touches the edge

Breaking news Breaking news Breaking news Breaking news...

It doesn't come out from the other end until everything goes through

s

^above is the sentence almost going to come out of the other end^

I have searched all over google (I even found a hack on google(search "marquee html"))

<marquee>here is the text I repeat it over and over again it keeps going and going but the beginning wouldn't come out until I touch it</marquee>

Answer 1

You probably should not use the <marquee> tag as it is deprecated, or obsolete rather, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

Maybe try for a javascript/jquery solution. There are plenty of plugins for this

Edit

I found this jQuery Marquee Plugin with an option for no gap like you are looking for. Here is an example

$('.marquee').marquee({
  direction: 'left'
});

.marquee {
  width: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>

<div class="marquee" data-duplicated='true' data-direction='left'>jQuery marquee is the best marquee plugin in the world</div>

2023 EDIT

Can use CSS animations:

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid #333;
}

.marquee p {
  padding-left: 50%;
  color: red;
  animation: marquee 7s linear infinite;
}

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

<div class="marquee">
  <p>Enjoy this CSS marquee! 2023!</p>
</div>