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"
>
  <p>…</p>
  <p>…</p>
</div>

Default
Contrast

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-stack tng-overflow-scroll is-block has-hidden-scrollbar"
  style="max-block-size: 4lh"
>
  <p class="tng-text-body">…</p>
  <p class="tng-text-body">…</p>
</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"
>
  <button class="tng-icon-button is-ghost" aria-label="Scroll up">
    <i class="tng-icon icon-chevron-up" aria-hidden="true"></i>
  </button>
  <div
    class="tng-overflow-scroll is-block"
    style="max-block-size: 3.5lh"
  >
    <div class="tng-stack p-md">
      <p class="tng-text-body">…</p>
      <p class="tng-text-body">…</p>
    </div>
  </div>
  <button class="tng-icon-button is-ghost" aria-label="Scroll down">
    <i class="tng-icon icon-chevron-down" aria-hidden="true"></i>
  </button>
</div>

Default
Contrast

Properties

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

Accessibility

Scrollable regions

A scrollable container is not keyboard-accessible by default. Add tabindex="0" so keyboard users can focus the container and scroll with arrow keys. Pair it with role="region" and aria-label so screen readers announce the scrollable area.

<div
  class="tng-overflow-scroll"
  role="region"
  aria-label="Scrollable content"
  tabindex="0"
>
  …
</div>

Overflow indicators

The chevron icons flanking the scroll area must have aria-hidden="true" — they are purely decorative.
The gradient overlays are CSS-only and invisible to assistive technologies.

Truncated text

Content hidden by .tng-overflow-ellipsis or .tng-overflow-multiline-ellipsis is invisible to sighted users but still present in the accessibility tree. If the full text is important, consider providing it via title or an expandable control.