Fade KIT

On this page

Directive that uses masking to fade out overflown content

Basic

Single scrollable line with automatic fade on the edges.

I am a very long text that overflows with a single line fade

Multiline

Fade on the last line. When applying custom line height, keep in mind that accessible font scaling can be applied. You can account for it using --tui-font-offset CSS variable or TUI_FONT_OFFSET signal DI token.

Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the Andals, the Rhoynar and the First Men, Queen of Meereen, Khaleesi of the Great Grass Sea, Protector of the Realm, Lady Regent of the Seven Kingdoms, Breaker of Chains and Mother of Dragons.

Vertical

Scrollable vertical container with automatic fade on the edges.

Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the Andals, the Rhoynar and the First Men, Queen of Meereen, Khaleesi of the Great Grass Sea, Protector of the Realm, Lady Regent of the Seven Kingdoms, Breaker of Chains and Mother of Dragons.

Hyphens

In multiline mode you can use hyphen CSS rule to avoid long words wrapping to the next line entirely which can cause fade effect to not be visible at all due to last visible line becoming too short.

Use CSS hyphens and declare lang on your html tag so that you don't get a situation where a whole long word is shifted to the new line and you observe no fade effect

Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the pneumonoultramicroscopicsilicovolcanoconiosis Men, Queen of Meereen, Khaleesi of the Great Grass Sea, Protector of the Realm, Lady Regent of the Seven Kingdoms, Breaker of Chains and Mother of Dragons.

InputChip

3

4

5

Compartmentalization

GitHub StackBlitz