@spectrum-web-components/truncated NPM

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

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>

design-system spectrum adobe adobe-spectrum web components web-components lit-element lit-html component css

@spectrum-web-components/base @spectrum-web-components/overlay @spectrum-web-components/styles @spectrum-web-components/tooltip

@spectrum-web-components/bundle @swc-react/truncated

1.2.0

5 months ago

1.7.0-snapshot.20250609112703

2 months ago

1.6.0

3 months ago

0.0.0-20250211061642

6 months ago

0.0.0-20241211110529

8 months ago

1.7.0-snapshot.20250519151006

2 months ago

9 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

5 months ago

9 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

4 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

6 months ago

6 months ago

6 months ago

3 months ago

5 months ago

8 months ago

8 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

5 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

5 months ago

8 months ago

5 months ago

6 months ago

9 months ago

1.6.1-preview-2d9fabee.20250507183133

3 months ago

6 months ago

4 months ago

8 months ago

8 months ago

3 months ago

8 months ago

8 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

5 months ago

8 months ago

6 months ago

5 months ago

5 months ago

5 months ago

6 months ago

5 months ago

4 months ago

5 months ago

5 months ago

1.7.0-snapshot.20250519143559

2 months ago

8 months ago

6 months ago

8 months ago

4 months ago

1 month ago

5 months ago

4 months ago

8 months ago

1.7.0-snapshot.20250519200040

2 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

3 months ago

3 months ago

6 months ago

5 months ago

4 months ago

0.0.0-modal-performance-20250414163725

3 months ago

5 months ago

6 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

1 year ago

10 months ago

11 months ago

11 months ago

12 months ago

11 months ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago