@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

6 months ago

1.7.0-snapshot.20250609112703

2 months ago

1.6.0

4 months ago

0.0.0-20250211061642

6 months ago

0.0.0-20241211110529

8 months ago

1.7.0-snapshot.20250519151006

3 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

6 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

5 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

7 months ago

7 months ago

6 months ago

4 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

6 months ago

5 months ago

6 months ago

6 months ago

6 months ago

5 months ago

5 months ago

6 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

8 months ago

8 months ago

9 months ago

8 months ago

8 months ago

6 months ago

9 months ago

6 months ago

6 months ago

9 months ago

1.6.1-preview-2d9fabee.20250507183133

3 months ago

6 months ago

5 months ago

8 months ago

8 months ago

4 months ago

8 months ago

8 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

6 months ago

8 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

5 months ago

6 months ago

6 months ago

1.7.0-snapshot.20250519143559

3 months ago

8 months ago

6 months ago

8 months ago

5 months ago

2 months ago

5 months ago

5 months ago

8 months ago

1.7.0-snapshot.20250519200040

3 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

3 months ago

4 months ago

6 months ago

6 months ago

4 months ago

0.0.0-modal-performance-20250414163725

4 months ago

6 months ago

6 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

11 months ago

12 months ago

12 months ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago