# TextTruncateMiddle

*Category:* Components
*Section:* Content
*Source:* https://uikit.developers.rio.cloud/#/components/textTruncateMiddle
*Captured:* 2026-04-27T14:58:06.887Z

TextTruncateMiddle truncates long text in the middle and keeps the end segment visible.

## TextTruncateMiddle

Useful for IDs, URLs, and file names where the suffix helps identify the value quickly.

### Example: Example 1

Drag the right handle to change width 2bb5e796-6c5e-4bc4-871b-f3af- d469-1c1e https://service.example.com/fleet/vehicles/2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1 e/details

Suffix length
9

#### React (tsx)

```tsx
import { useState } from 'react';

import Resizer from '@rio-cloud/rio-uikit/Resizer';
import Slider from '@rio-cloud/rio-uikit/Slider';
import TextTruncateMiddle from '@rio-cloud/rio-uikit/TextTruncateMiddle';

const sampleId = '2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e';
const sampleUrl = 'https://service.example.com/fleet/vehicles/2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e/details';

const MIN_SUFFIX_LENGTH = 2;
const MAX_SUFFIX_LENGTH = 12;

const MIN_WIDTH = 220;
const MAX_WIDTH = 620;
const INITIAL_WIDTH = 300;
const INITIAL_SUFFIX_LENGTH = 9;

export default () => {
    const [suffixLength, setSuffixLength] = useState(INITIAL_SUFFIX_LENGTH);
    const [contentWidth, setContentWidth] = useState(INITIAL_WIDTH);

    const onResize = (diff: number) => {
        setContentWidth(currentWidth => {
            const updatedWidth = currentWidth - diff;
            if (updatedWidth < MIN_WIDTH) {
                return MIN_WIDTH;
            }
            if (updatedWidth > MAX_WIDTH) {
                return MAX_WIDTH;
            }
            return updatedWidth;
        });
    };

    return (
        <div className='max-width-700'>
            <label>Drag the right handle to change width</label>

            <div className='position-relative border rounded padding-15 bg-white' style={{ width: contentWidth }}>
                <TextTruncateMiddle
                    className='border rounded padding-x-10 padding-y-5 margin-bottom-15'
                    text={sampleId}
                    suffixLength={suffixLength}
                    endClassName='text-medium'
                />

                <TextTruncateMiddle
                    className='border rounded padding-x-10 padding-y-5'
                    text={sampleUrl}
                    suffixLength={suffixLength}
                />

                <Resizer
                    className='right-0 display-grid place-items-center width-auto height-100pct padding-x-2'
                    position={Resizer.RIGHT}
                    onResize={onResize}
                >
                    <div className='height-30 width-2 bg-gray' />
                </Resizer>
            </div>

            <div className='margin-top-20 max-width-300'>
                <label>Suffix length</label>
                <Slider
                    value={suffixLength}
                    minValue={MIN_SUFFIX_LENGTH}
                    maxValue={MAX_SUFFIX_LENGTH}
                    step={1}
                    valueLabels
                    onChange={value => setSuffixLength(value)}
                    onDragEnd={value => setSuffixLength(value)}
                />
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="max-width-700">
    <label>Drag the right handle to change width</label>
    <div class="position-relative border rounded padding-15 bg-white" style="width: 300px;">
        <span class="ellipsis-middle border rounded padding-x-10 padding-y-5 margin-bottom-15" title="2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e">
            <span class="">2bb5e796-6c5e-4bc4-871b-f3af-</span>
            <span class="text-medium">d469-1c1e</span>
        </span>
        <span class="ellipsis-middle border rounded padding-x-10 padding-y-5" title="https://service.example.com/fleet/vehicles/2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e/details">
            <span class="">https://service.example.com/fleet/vehicles/2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1</span>
            <span class="">e/details</span>
        </span>
        <div class="Resizer resize-horizontal resize-right right-0 display-grid place-items-center width-auto height-100pct padding-x-2">
            <div class="height-30 width-2 bg-gray">
            </div>
        </div>
    </div>
    <div class="margin-top-20 max-width-300">
        <label>Suffix length</label>
        <div class="range-slider show-value-labels" style="color: var(--brand-primary);">
            <div class="range-whole-track">
            </div>
            <div class="range-track" style="width: 70%;">
                <div class="range-value">
                    <span>9</span>
                </div>
            </div>
            <input class="" min="2" max="12" step="1" type="range" value="9">
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| text | string | — | Full text value to render. |
| suffixLength | number | 6 | Number of characters preserved at the end. |
| startClassName | string | — | Additional classes for the first text segment (start). |
| endClassName | string | — | Additional classes for the second text segment (end). |