@patternfly/react-core/src/components/Truncate/examples/Truncate.md

This library provides a set of common React components for use with the PatternFly reference implementation.

---
id: Truncate
section: components
propComponents: [Truncate]
---

import './TruncateExamples.css';

## Examples

### Default
```js
import React from 'react';
import { Truncate } from '@patternfly/react-core';

<div className="truncate-example-resize">
  <Truncate
    content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
  />
</div>
```

### Middle
```js
import React from 'react';
import { Truncate } from '@patternfly/react-core';

<div className="truncate-example-resize">
  <Truncate
    content={'redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip'}
    trailingNumChars={10}
    position={'middle'}
  />
</div>
```

### Start
```js
import React from 'react';
import { Truncate } from '@patternfly/react-core';

<div className="truncate-example-resize">
  <Truncate
    content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
    position={'start'}
  />
</div>
```

### Default with tooltip at the bottom
```js
import React from 'react';
import { Truncate } from '@patternfly/react-core';

<div className="truncate-example-resize">
  <Truncate
    content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
    tooltipPosition={'bottom'}
  />
</div>
```