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

The tng-overflow-scroll class enables scrolling on an element. Add .is-inline for horizontal-only scrolling or .is-block for vertical-only scrolling.

<div
  class="tng-overflow-scroll is-block"
  style="max-block-size: 3.5lh"
>
  …
</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.

Hidden scrollbar

You can add the has-hidden-scrollbar class to hide the scrollbar while still allowing scrolling.

<div
  class="tng-overflow-scroll is-block has-hidden-scrollbar"
  style="max-block-size: 3.5lh"
>
  …
</div>

Overflow indicators

You can wrap the scrollable container with the tng-overflow-scroll-indicators class to add gradient overlays at the edges of the scrollable area, indicating that more content is available. The axis is automatically detected based on the child’s .is-inline or .is-block class.

Use the data-overflow-start and data-overflow-end attributes to control the visibility of the indicators.

<div
  class="tng-overflow-scroll-indicators"
  data-overflow-start="true"
  data-overflow-end="true"
>
  <i class="tng-icon icon-chevron-up" aria-hidden="true"></i>
  <div
    class="tng-overflow-scroll is-block"
    style="max-block-size: 3.5lh"
  >
    <div class="tng-box p-md">…</div>
  </div>
  <i class="tng-icon icon-chevron-down" aria-hidden="true"></i>
</div>

Default
Contrast

Properties

--tng-overflow-scroll-indicator-color: Sets the color of the overflow indicators. Defaults to the scheme color.
--tng-overflow-scroll-indicator-size: Sets the size of the overflow indicators. Defaults to --tng-spacing-4xl.