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


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Middle


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Start


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

## 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. |