- React
- HTML

import ’./Truncate.css’

## Examples

### Notes

The truncate component contains two child elements, `.pf-v6-c-truncate__start` and `.pf-v6-c-truncate__end`. If both `start` and `end` are present within `.pf-v6-c-truncate`, trucation will occur in the middle of the string. If only `.pf-v6-c-truncate__start` is present, truncation will occur at the end of the string. If only `.pf-v6-c-truncate__end` is present, truncation will occur at the beginning of the string. A `.pf-v6-c-popover` will be automatically applied to the PatternFly React implementation. `&lrm;` must be included at the end of string to denote the ending punctuation mark. Otherwise it will occur and the beggining of truncation for a `pf-v6-c-truncate__end` element.

### Default

### Middle

### Start

## Documentation

### Usage

Class | Applied | Outcome
--- | --- | ---
`.pf-v6-c-truncate` | `<span>` | Initiates the truncate component.
`.pf-v6-c-truncate__start` | `<span>` | Defines the truncate component starting text.
`.pf-v6-c-truncate__end` | `<span>` | Defines the truncate component ending text.

##
CSS variables