Taiga UI 5.0 is out!

ShrinkWrap KIT

Examples API GitHub

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
    
      
    

      
      
    

  
    
      <section
    tuiMessage
    class="incoming"
>
    I'm a short message
</section>
<section
    tuiMessage
    class="incoming"
>
    I'm a broken long message wrapping to a new line
</section>
<section
    tuiMessage
    tuiShrinkWrap
    class="incoming"
>
    <tui-shrink-wrap>I'm a fixed long message wrapping to a new line</tui-shrink-wrap>
</section>
<section
    tuiMessage
    class="outgoing"
>
    I'm a short message
</section>
<section
    tuiMessage
    class="outgoing"
>
    I'm a broken long message wrapping to a new line
</section>
<section
    tuiMessage
    tuiShrinkWrap
    class="outgoing"
>
    <tui-shrink-wrap>I'm a fixed long message wrapping to a new line</tui-shrink-wrap>
</section>

    

      
      
    

  
    
      :host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    inline-size: 16rem;
}

.incoming {
    background: var(--tui-background-neutral-1);
    border-end-start-radius: 0;
    white-space: normal;

    & + .incoming {
        margin-block-start: -0.5rem;
    }
}

.outgoing {
    background: var(--tui-background-accent-1);
    color: var(--tui-text-primary-on-accent-1);
    align-self: flex-end;
    white-space: normal;
    border-end-end-radius: 0;

    & + .outgoing {
        margin-block-start: -0.5rem;
    }
}

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
    
      
    

      
      
    

  
    
      <h4 tuiHeader="body-l">With ShrinkWrap</h4>
<div tuiToast>
    <tui-shrink-wrap>Long messages are wrapping perfectly to fit into max width of the toast</tui-shrink-wrap>
</div>
<h4 tuiHeader="body-l">Without ShrinkWrap</h4>
<div tuiToast>Long messages are wrapping perfectly to fit into max width of the toast</div>

    

      
      
    

  
    
      :host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

Custom width

Any valid CSS size string can be used, including calc , different units, vars and math functions.
TitleLong messages are wrapping perfectly to fit into max width of the cell
    
      
    

      
      
    

  
    
      <div
    tuiCell
    tuiShrinkWrap="15rem"
>
    <div tuiAvatar="@tui.user"></div>
    <div tuiTitle>
        <strong>Title</strong>
        <tui-shrink-wrap>Long messages are wrapping perfectly to fit into max width of the cell</tui-shrink-wrap>
    </div>
</div>

    

      
      
    

  
    
      :host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

[tuiCell] {
    background: var(--tui-background-neutral-1);
}
GitHub StackBlitz