Sometimes you have more words than you have space for those words. This might happen on an index page, for example, where many elements are competing for the user's attention. When the content grows longer, you want to show the content in truncated form so it doesn't take up too much space.
To clearly communicate that the content is truncated, you can make it fade out by placing a gradation over the bottom of the preview. Placing content over other content in a certain region of the parent box is a job for absolute positioning.
Consider this long paragraph of text:
When the box has a fixed width and height, the text is likely to overflow:
You set the parent's overflow property to hidden to stop the text from running beyond its box:
If you are lucky, the text will be cut off in the middle of a line, and the user will clearly see that the content has been truncated. But what if the cutoff happens right at the end of a sentence? The user might never know there was more content below. To prevent this misunderstanding, you want the text to fade out. You add an element that will provide a surface area for a gradient and also offer a link to show the expanded text:
You want the link at the bottom of the parent, sitting over the other text, so you absolutely position it:
Notice how the parent has been switched to relative positioning so it can serve as a non-static ancestor. Notice also that you don't need to move the fader element to the bottom of the parent in the HTML. It appears earlier in the HTML than the text, but the styles pull it out of the normal flow and anchor it to the bottom of the parent.
The fader box currently doesn't do any fading. Its background color is a semi-transparent black produced using an rgba value. Instead of a fixed color, you want a gradient that flows from transparent black at the top to opaque black at the bottom. You use background-image and linear-gradient to achieve this:
The link needs to be centered and pushed to the bottom of the fader. Flexbox's distribution and alignment properties can make this happen:
The link color has also been changed to increase its contrast.
This fader widget is designed for multiline text that leads to vertical overflow. If you have a single line of text that overflows its container horizontally, considering using the text-overflow property.