How to make a line darken if it is longer than the required distance?

Question

css

Any ideas how to do it? What if the text goes beyond the bounds of the container, it darkened from right to left at the end, some kind of block with a gradient was adjusted, I don’t know. And then I myself will do that when hovering there was an animation that he runs to see the full line.

Like this

Answer 1

Compare scrollWidth and clientWidth, if they are different, then the container is full, and then I advise you to add a class in which you will do this "adjustment" :)
<div class="text">Много каких-то букв</div>

.text{
  width: 100px;
  height: 40px;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.overflowed::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(90deg, transparent, #222);
  pointer-events: none;
}

const el = document.querySelector('.text');

if (el.scrollWidth !== el.clientWidth) {
  el.classList.add('overflowed')
}

ps I see the word "getting better" and I catch a microinfarction