Content Fade

This Angular component is designed to hide large text by using a smooth transition from the text to the background color of the parent block as a gradient.

I usually use text reduction to shorten ... 3 points, which doesn't look very nice, content fade component allows to make a smooth transition from text to background, which looks much more professional than just trimming the dough.

The most useful use case for this component would be in table cells, but in general it can be used anywhere there is a lot of text.

Below are some examples of how to use it.

Basic content fade

By default, content hiding comes from both sides.

Content fade with custom width

With the width parameter you can increase the gradient, the value can be specified as a number of pixels (100px) or as a percentage (40%).

Content fade with custom position

With the position parameter you can define on which side to hide the text, you can use 3 options as a value: both, start, end.