sp-truncated

NPM

0.44.0

Storybook

View Storybook
Examples API Changelog

0.44.0 (2024-07-15) #

Note: Version bump only for package @spectrum-web-components/truncated

0.43.0 (2024-06-11) #

Note: Version bump only for package @spectrum-web-components/truncated

0.42.5 (2024-05-24) #

Note: Version bump only for package @spectrum-web-components/truncated

0.42.4 (2024-05-14) #

Note: Version bump only for package @spectrum-web-components/truncated

0.42.3 (2024-05-01) #

Note: Version bump only for package @spectrum-web-components/truncated

0.42.2 (2024-04-03) #

Note: Version bump only for package @spectrum-web-components/truncated

0.42.1 (2024-04-02) #

Note: Version bump only for package @spectrum-web-components/truncated

0.42.0 (2024-03-19) #

Bug Fixes #

  • truncated: add truncated package (#4163) (4ba0480)

Reverts #

  • Revert "Truncated element (#4125)" (#4160) (da88bbe), closes #4125 #4160

Description #

<sp-truncated> renders a line of text, truncating it if it overflows its container. When overflowing, a tooltip is automatically created that renders the entire non-truncated content.

It is used like a <span> to contain potentially-long strings that are important for users to see, even when in small containers, like full names and email addresses.

Usage #

See it on NPM! How big is this package in your project?

yarn add @spectrum-web-components/truncated

Import the side effectful registration of <sp-truncated> via:

import '@spectrum-web-components/truncated/sp-truncated.js';

When looking to leverage the Truncated base class as a type and/or for extension purposes, do so via:

import { Truncated } from '@spectrum-web-components/truncated';

Example #

<sp-truncated>
    This will truncate into a tooltip if there isn't enough space for it.
</sp-truncated>

With specific overflow content #

By default, tooltip text will be extracted from overflowing content. To provide your own overflow content, slot it into "overflow":

<sp-truncated placement="right">
    This is the inline content
    <span slot="overflow">
        And this overflow content will go into the tooltip, on the right
    </span>
</sp-truncated>