Truncate CDK

    
      
    

      
        Copy
      
      
    
  

    
      <div
    tuiCardMedium
    class="poster"
>
    <h2 tuiTitle>
        Poster

        @let text =
            `Look deep into nature, and then you will understand everything better: cinema, concerts, theaters and sports up to 25%`;

        <span
            tuiSubtitle
            tuiTruncate="2"
            [attr.title]="text"
            [textContent]="text"
        ></span>
    </h2>

    <div
        tuiBadge
        class="badge"
    >
        <tui-icon icon="@tui.rss" />
        10%
    </div>
</div>

<div
    tuiCardMedium
    class="fly"
>
    <div
        tuiBadge
        class="badge"
    >
        <tui-icon icon="@tui.timer" />
        50 min
    </div>

    <h2 tuiTitle>
        Order #31

        <span
            tuiSubtitle
            tuiTruncate
        >
            8375 Brook Avenue Brooklyn, NY 11206
        </span>
    </h2>
</div>

<div
    tuiCardLarge="compact"
    class="one-line"
>
    <div tuiCell>
        <tui-icon icon="@tui.file" />
        <div tuiTruncate>filename_long_long_long_long_long_long_long_long_long_longname.doc</div>
    </div>
</div>

@let filename = `filename_long_long_long_long_long_long_long_long_long_longname.doc`;

<div
    tuiCardLarge="compact"
    tuiHintDirection="top-end"
    class="two-line"
    [tuiHint]="filename"
>
    <div tuiCell>
        <tui-icon icon="@tui.file" />
        <div tuiTruncate="2">
            {{ filename }}
        </div>
    </div>
</div>

    

      
        Copy
      
      
    
  

    
      :host {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    inline-size: 23.25rem;
}

.badge {
    background: #aff218;
    color: #333;
}

[tuiTruncate] {
    inline-size: 100%;
}

[tuiSubtitle][tuiSubtitle] {
    color: #fff;
}

h2 {
    inline-size: 100%;
}

.poster {
    background: #4158d0 linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
    padding: 0.75rem;
    color: #fff;
    inline-size: 13.9375rem;
    block-size: 8rem;
}

.fly {
    background: #0093e9 linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
    padding: 0.75rem;
    color: #fff;
    inline-size: 8rem;
    block-size: 8rem;
}

.one-line {
    background: #00dbde linear-gradient(90deg, #00dbde 0%, #fc00ff 100%);
    inline-size: 100%;
}

.two-line {
    background: #fbab7e linear-gradient(62deg, #fbab7e 0%, #f7ce68 100%);
    inline-size: 15.9375rem;
}

[tuiCardLarge] [tuiCell],
[tuiCardLarge] tui-icon {
    color: #fff;
}

    

      
        Copy