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.

Lorem ipsum dolor sit amet, consec tetur adip isc ing elit,

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%).

Lorem ipsum dolor sit amet, consec tetur adip isc ing elit,

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.

Both

Start

End

Lorem ipsum dolor sit amet, consec tetur adip isc ing elit,

API Reference

Properties of the ngs-content-fade component.

Prop	Type	Default
color Color of the fade	string	–
width Width of the fade	string	–
position Position of the fade	both \| start \| end	both