Как сделать затемнение строки если она длинее нужного растояния?

Question

[Андрей Андреев]

Есть идеи что бы как то сделать? Что если текст выходит за рамки положеного контейнера он справа на лево в конце затемнялся, налаживался какой-то блок с градиентом не знаю. А потом я уже сам сделаю что при наведении была анимация что он бежит что бы увидеть полностью строку.

Вот так

Answer 1

[goshaLoonny]

Сравнить scrollWidth и clientWidth, если они разные то контейнер переполнен, а дальше советую добавить класс в котором вы и сделаете это "налаживание" : )

<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')
}

p.s. Вижу слово "налаживался" и ловлю микроинфаркт

Comments

[Андрей Андреев]

вхвхвх да, спасибо

Answer 2

[Антон Горецкий]

Можно наложить градиент от черного до прозрачного, спозиционировать абсолютно
Вот здесь можно почитать с примерами

Comments

[Андрей Андреев]

спасибо