Плавно скрывающийся текст при переполнении блока CSS
пытаюсь сделать вот такой элемент 
чтобы текст который выходит за блок по ширине красиво скрывался белой внутренней тенью. Но у меня получается нечто совершенно иное, буквы сжимаются и залазят друг на друга, тень нормальная не получается. Подскажите пожалуйста решение этой задачки, или где его можно подсмотреть
Ответы (1 шт):
Автор решения: Vladimir Gonchar
→ Ссылка
Вот такой вариант с :after (или с :before, эффект будет тот же) вполне себе решает задачу
.text {
width: 300px;
overflow: hidden;
white-space: nowrap;
position: relative;
font-size: 1.5rem;
color: #334d74;
font-family: sans-serif;
}
.text:after {
position: absolute;
right: 0;
height: 100%;
width: 50px;
background: linear-gradient(90deg, transparent 0, #fff 100%);
content: "";
}<div class="text">Какой-то очень большой текст, который не влезет в блок</div>