Truncate
Truncated text for lit-material: end or middle ellipsis for long IDs, hashes, paths and URLs, full text kept for copy, search and screen readers.
- 988 B gzipped
- @lit-material/truncate 0.1.1
- Renders on the server
Example
Truncate
Long IDs, hashes and paths: the full text stays in the DOM for copy and screen readers; hover shows it.
Install
npm install @lit-material/truncate @lit-material/tokensimport "@lit-material/truncate";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-truncate>
One line of text that ends in an ellipsis when it doesn't fit — or, with
position="middle", keeps its last characters so long IDs, hashes, paths
and URLs stay recognisable at both ends: sha256:9f86d0…0f00a08.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | string | "" | The full text. |
position | position | TruncatePosition | "end" | Where the ellipsis goes. |
tailLength | tail-length | number | 8 | With position="middle", how many characters to keep at the end. |
truncated | truncated | boolean | false | Set while the text doesn't fit; reflected. |
CSS parts
| Part | Description |
|---|---|
start | The part that shrinks (all of the text with position="end"). |
tail | The kept end with position="middle". |