Как реализовать данный эффект в блоке?

Question

[abczor]

Интересуют варианты реализации данного эффекта в css.
Если задача, добавленная в блок, будет превышать размер блока, то справа должен появляться градиент, который будет смягчать этот момент.

Скрин
rgho.st/7QTntXgj5

Answer 1

[Сергей Горячев]

https://jsfiddle.net/webirus/x8nd5rb0/

Comments

[abczor]

Нюансы в том, что градиент должен появляться только в том случае. Если длина текста превышает ширину блока. Если нет, то этого градиента быть не должно. Может есть какие то статьи по данному поводу как реализовать?

[Сергей Горячев]

abczor: JS. Отлавливать ширину контента, сравнивать с шириной блока. Если ширина больше, добавлять класс с псевдоэлементом, если ширина меньше, не добавлять.

Answer 2

[display: block]

box-shadow inset

Comments

[display: block]

У псевдоэлемента, конечно, чтобы тень поверх текста была.