Overflow

These overflow utility classes help control how content that exceeds the bounds of its container is handled. They don’t set any size constraints on their own, so they need to be used in conjunction with other sizing utilities or styles.

Ellipsis

<div class="tng-overflow-ellipsis">…</div>

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Multiline ellipsis

<div
  class="tng-overflow-multiline-ellipsis"
  style="--tng-overflow-multiline-ellipsis-max-lines: 3"
>
  …
</div>

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Scroll

<div class="tng-surface p-md border-sm">
  <div class="tng-overflow-scroll" style="max-block-size: 3lh">…</div>
</div>

Ea reprehenderit qui mollit. Magna quis veniam ea est deserunt labore eu ullamco ea ex cupidatat ullamco exercitation esse. Anim amet mollit qui mollit reprehenderit nisi commodo occaecat. Laboris esse ex amet consequat proident officia id velit cupidatat nostrud deserunt ipsum proident. Enim exercitation qui sunt.