ShrinkWrap KIT

On this page

A tight shrink wrapping implementation in modern browsers using progressive enhancement concept, see examples below for visual explanation. Requires scroll-driven animations to work, gracefully ignored in older browsers.

Chat

Making sure chat messages only span as wide as they have to.

I'm a short message

I'm a broken long message wrapping to a new line

I'm a fixed long message wrapping to a new line

I'm a short message

I'm a broken long message wrapping to a new line

I'm a fixed long message wrapping to a new line

Toasts

Toasts already have tuiShrinkWrap directive on host.

With ShrinkWrap

Long messages are wrapping perfectly to fit into max width of the toast

Without ShrinkWrap

Long messages are wrapping perfectly to fit into max width of the toast

Custom width

Any valid CSS size string can be used, including calc , different units, vars and math functions.

Title

Long messages are wrapping perfectly to fit into max width of the cell

GitHub StackBlitz